Change class priority

Question

There is a situation that I need to change the class priority. For example:

.one {
  color: green;
}

.comment {
  color: gray;
}

.red {
  color: red !important;
}

<div class="one two red">Content</div>
<div class="comment two red">Content</div>

At the moment, .red color is applied. Is it possible to force .comment.red to get the color from .comment?

Note: The .comment color is unknown (comes from changeable themes).

The cascade is working against you. The selector that comes last is the one that takes priority — Paulie_D, Nov 23 '20 at 19:19
@Paulie_D Without `!important`, the `.red` class wouldn't apply. :( — erosman, Nov 23 '20 at 19:26
from the duplicate: https://stackoverflow.com/a/51382588/8620333 ... use `not()` selector to increase specificity — Temani Afif, Nov 23 '20 at 19:32
@TemaniAfif You are right.. I completely forgot about `:not()` ..doh — erosman, Nov 23 '20 at 19:44
and here is a better duplicate: https://stackoverflow.com/q/28299817/8620333 (was searching for this one in particular) — Temani Afif, Nov 23 '20 at 19:53

Praveen Kumar Purushothaman · Answer 1 · 2020-11-23T19:30:50.730

3

Yes, you can use multiple classes to make it more specific. Also, we know that .comment.red needs to have min two classes. So I feel this is allowed:

.one {
  color: green;
}

.comment.comment {
  color: gray;
}

.red {
  color: red;
}

<div class="one two red">Content</div>
<div class="comment two red">Content</div>

But please get rid of !important.

The .comment's rule, instead of it being like this:

We can make it like this:

More Explanation

Modern browsers compute the style contexts using the rule tree. If multiple rules have the same weight, origin and specificity, the one written lower down in the stylesheet is considered and wins.

When there's only one selector here:

.class1 {}

The weight of the above rule is 0010 as per CSS specificity. The same way, if there are two classes:

.class1.class2 {}
.class1.class1 {}

Note that in the second line, I have written twice the same class. Both will be computed to 0020, which is higher than the first one, in spite of the "unknown" class, we have two classes in the rule now.

This is the same trick I used in the above example to make the theming easier.

edited Nov 23 '20 at 19:30

answered Nov 23 '20 at 19:20

Praveen Kumar Purushothaman

164,888
24
203
252

Can you explain the use of `.comment.comment` here – j08691 Nov 23 '20 at 19:25
@j08691 Let me do this. I gave a pictorial explanation. I'll write in words now. – Praveen Kumar Purushothaman Nov 23 '20 at 19:26
@j08691 `.comment.comment` matches the comment class twice, which doubles the specificity of the CSS. See here: https://jsfiddle.net/wkz3d2ro/ – Liftoff Nov 23 '20 at 19:29
@j08691 I have just added the explanation. Can you please check it out? – Praveen Kumar Purushothaman Nov 23 '20 at 19:31
@David I have just added the explanation in words. Can you please check it out and let me know if it's alright or should anything be changed? – Praveen Kumar Purushothaman Nov 23 '20 at 19:31
@David yes, I'm aware. I just wanted Preveen to add that to his answer since many people, especially beginners with CSS, don't understand that – j08691 Nov 23 '20 at 19:32
1

Thanks @j08691. Done it. – Praveen Kumar Purushothaman Nov 23 '20 at 19:32
@PraveenKumarPurushothaman Thank you but the color of `.comment` is changeable & unknown. – erosman Nov 23 '20 at 19:40
@erosman That's alright and I understand. Just use `.comment.comment` in your rule. You don't need to mention the second class. Oh and you can use `:not(.comment)` as well for the `.red`. Do you want me to add this to the answer? – Praveen Kumar Purushothaman Nov 23 '20 at 19:45

Change class priority

1 Answers1