Is there a way to apply styling according to the order classes are applied?

user_1850272 0
Viewed 56

If We do something like this in our css

.class01.class02.class03{ background-color: lavenderblush; }

.class03.class01.class02{ background-color: brown; }

and this in our html

<article class="class01 class02 class03"></article>
<article class="class03 class01 class02"></article>

the 2nd rule will be applied to both elements. Is there a way to make these rules apply according to the order?

css html
4 Answers

It won't work because: Order of CSS classes in HTML doesn't matter but there is a way using attribute selector

article[class="class01 class02 class03"]{ background-color: lavenderblush; }

article[class="class03 class01 class02"]{ background-color: brown; }
<article class="class01 class02 class03">Test1</article>
<article class="class03 class01 class02">Test2</article>

user_48139130

Interesting question. I don't suggest doing it as classes aren't meant to be used like this, but I guess there's at least one way for accomplishing the desired result...

article {
  width: 50px;
  height: 50px;
}

article[class*="class01 class02 class03"] {
  background: lavenderblush;
}

article[class*="class03 class01 class02"] {
  background: brown
}
<article class="class01 class02 class03"></article>
<article class="class03 class01 class02"></article>

So we're checking that the class contains the exact provided substring, while the wildcard allows the class list to contain other classes before and after as well. When an exact match is needed we could use article[class="class03 class01 class02"].

user_10167770

You can use the [class="class1 class2 class3"] attribute in the css by specifying the order of classes you want.

article[class="class01 class02 class03"] {
    background-color: lavenderblush;
}

article[class="class03 class01 class02"] {
    background-color: brown;
}
<article class="class01 class02 class03">text</article>
<article class="class03 class01 class02">text</article>

user_135734440

The answer to the question is no: it is not possible to the normal common notation. Only the trick using the attribute selector as given in the other answers does work on the first look. But head up: it is not as easy as it seems.

EXPLANATION: HOW IT WORKS

Indeed you are able to calculate/controll it.

In HTML/CSS wins the element/class/id construct with highest specifity. It is a slightly complex ranking on the first view but if only used classes it is not as complicated.

For class construction a.b.c the specifity counts:

  • special combination off this three classes which overrides i.e. background setting of a.b.x
  • the total count of used classes what means this three classes overwrite i.e. background setting off a.b
  • NOTE ATTRIBUTE SELECTOR: One attribute selector counts as one class. So, if you have an attribute seletor [class="a b c"] it lose against c.b.a noted on another place in your stylesheet.
  • Order in HTML does not count for the specifity: a b c is the same combination and the same number of classes as c b a.
  • If a class construct (combination) with the same specifity noted twice in a CSS i.e. a.b.c: red and c.b.a: green the last notation overwrites the notation done before.

Some thinking:

Importand: the decision which concept is used to style a page is up to the coder himself!!! But even the attribute selector is a chance to realize that concept it is not the intendend way to use CSS. I asume using the rules of specifity in the intended css way could be a better/more intuitive way to control the design.

Links with information about specifity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specifishity.com/

user_92684850
Related