Class selector priority over several unique ID's

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)

And regarding `!important`, you can use it sometimes without blowing up, such as for utility classes. — gcampbell, Jul 20 '16 at 17:08
[No, don't use !important](http://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css) unless you have literally no other choice (ie. importing external content and you have no control over the styles). Your second approach is the best method - using selector specificity. That said, I normally put `id` selectors first as they have the most weight, ie. `#green-text.white-up-text` — Rory McCrossan, Jul 20 '16 at 17:08
@RoryMcCrossan are you sure if he has 20 classes will duplicate them instead of using `!important`? — Zakaria Acharki, Jul 20 '16 at 17:09
Yes, but then it becomes more about better design of your rules than using `!important`. Classes would be a much better choice for the OP here, instead of his current `id` — Rory McCrossan, Jul 20 '16 at 17:11

Sushanth -- · Accepted Answer · 2016-07-21T21:56:21.757

2

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.

edited Jul 21 '16 at 21:56

answered Jul 20 '16 at 17:07

Sushanth --

55,259
9
66
105

1

Since when did changing the order of selectors influence specificity? – BoltClock Jul 21 '16 at 05:42
@BoltClock That was clearly not my intention as the order does not matter, I must have mistyped. Thanks for pointing that out. – Sushanth -- Jul 21 '16 at 21:54
But instead of repeating yourself, why not _make use_ of order with same specificity? Have the color class rules (`.green-text{}` etc.) come first, followed by `.white-up-text { color: white; }` – CBroe Jul 21 '16 at 22:00
@CBroe That is even better. – Sushanth -- Jul 22 '16 at 17:35

score 1 · Answer 2 · answered Jul 22 '16 at 01:31

1

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.

answered Jul 22 '16 at 01:31

UIPassion

120
7

Class selector priority over several unique ID's

2 Answers2