Css code for multiple Ids

Question

my font is to be #fff and the mouse over is #3cf.

I am confused how to write the css using multiple Ids and the a:hover.

#btn1, #btn2, #btn3
{
    background-color: #003399;
    color: #FFF;
}
  #btn1, #btn2, #btn3, a:hover
{
    color:#3cf;
}

thanks...

also, consider using classes instead of IDs for assigning the same behavior to many different objects. You can easily mix & match classes and save a lot of pseudo-micro-managing this way — Ben Philipp
– Ben Philipp, Commented May 13, 2015 at 14:40
Why bother with the ids? You could just define rules for a and a:hover. And if it's only a select group of a tags you could use .btn-group > a in your example. — Tony
– Tony, Commented May 13, 2015 at 14:41
Use classes instead of IDs, if you had 20 buttons you would have to include #btn1, #btn2, #btn3 .... #btn20, whereas a class would just be .btn { background-color: #003399; color: #FFF; }, and you could add that class to all links. — Nick R
– Nick R, Commented May 13, 2015 at 14:47

Srdjan Dejanovic · Accepted Answer · 2015-05-13 14:35:47Z

3

Try this:

#btn1, 
#btn2, 
#btn3 {
    background-color: #003399;
    color: #FFF;
}
#btn1:hover, 
#btn2:hover, 
#btn3:hover, 
a:hover {
    color:#3cf;
}

answered May 13, 2015 at 14:35

Srdjan Dejanovic

1,4292 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Koopakiller · Accepted Answer · 2015-05-13 14:42:43Z

1

If I understand you correct, the a-tag is a child of your #btn*-tags. Than you need to write your code like this:

#btn1, #btn2, #btn3
{
    background-color: #003399;
    color: #FFF;
}

#btn1 a:hover,
#btn2 a:hover, 
#btn3 a:hover
{
    color:#3cf;
}

In this case the color property will be applied to the a-tag in the#btn*-tags if the mouse hovers the a-tag.
It is also possible to apply the color property to the #btn*-tag if the mouse hover them:

#btn1:hover,
#btn2:hover, 
#btn3:hover
{
    color:#3cf;
}

You should read a Little bit more about CSS Selectors. There is a good overview on Wikipedia.

answered May 13, 2015 at 14:42

Koopakiller

2,8813 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

Css code for multiple Ids

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related