类选择器优先于多个唯一ID

Question

I have three unique ID's like so:

#green-text {
    color: #57BF90;
}

#grey-text {
    color: #474444;
}

#orange-text {
    color: #FFAC00;
}

Which each has a class called .example-button . When one of these classes is clicked, I'd like to use jQuery to do

$('.example-button').click(function() {
     $(this).addClass('white-text');
     $(this).siblings().removeClass('white-text');
}

where

.white-text {
     color: white;
}

But of course this class doesn't take priority over the ID's so nothing would change. Is there a better way to script this other than

.white-up-text#green-text {
    color: white;
}
.white-up-text#grey-text {
    color: white;
}
.white-up-text#orange-text {
    color: white;
}

or other than using !important ? (I'm avoiding !important in order to respect good CSS practice)

Answer 1

Absolutely, you can keep nesting your styles in order to increase the specificity and target the element.

You could use !important but that should be a last option. Otherwise your code will not be scalable after a certain point and is considered a worst practice.

And put, id's first since they carry more weight (Just a pattern which in no way affects specificity)

#green-text.white-text {
    color: white;
}

Once you associate a style to an id.

• The only way to override would be is to use !important (Avoid it)
• Use a more specific style (which is always nested inside the id so that you are targeting it).
• Use inline style which has a better specificity than the id

In the long run it won't be maintainable. So it is always a better idea to replace it with a class instead

.green-text.white-up-text {
    color: white;
}
.grey-text.white-up-text {
    color: white;
}
.orange-text.white-up-text {
    color: white;
}

Also take a look at OOCSS which advocates the principle of code reuse, where classes are the king.

Answer 2

Change your jquery to :

$('.example-button').click(function() {
 $(this).css("color","white");
 $(this).siblings().removeAttr('style'); });

This works as inline style has greater specificity than id selector.