CODEWITHSUNDEEP
htmlcss
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Why there is no ordering in classes?

html....

<div class="one two">test</div>
<div class="two one">test</div>

css....

.one.two{
    color: red;
}
.two.one{
    color: blue;
}

I was supposing to have the first div color to be red and second div color to be blue, but it's taking lastly specified style rules for the both of the div that is color blue.

So, I wonder why the ordering of the classes are not maintained?

If this was what I was expecting, would it be an advantage or a disadvantage?

Upvotes: 1

Views: 93

Answers (3)

4dgaurav
4dgaurav

Reputation: 11506

I was reading above discussion and I agree with what BoltClock♦ says and others as well.

but I was refering this Does the order of classes listed on an item affect the CSS?, the use of attribute selectors in CSS where ScottS answered with some demo 1 demo 2 demo 3

and now I am muddled with whole thing! BoltClock♦ can you please put some more light on the same?

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

Both selectors, .one.two and .two.one, match both div elements here, and the selectors have the same specificity. Thus, by the CSS cascade rules, the latter declaration wins.

The mutual order of the class selectors is irrelevant by definition: the meaning of a class selectors is defined so that the order does not matter.

Moreover, even if it mattered, the HTML attributes class="one two" and class="two one" would still be equivalent, due to the way the the class attribute has been defined in HTML specifications.

What you should do depends on what you wish to accomplish. The question does not specify that. If you need to make the styling of elements depend on the order in which their classes are written in a selector, there is a flaw in the design of markup and styling.

Upvotes: 1

sahbeewah
sahbeewah

Reputation: 2690

Think about it semantically: A class is just that - some encompassing category to which an element belongs.

If we take the example of a table, some plausible classes might be: "rounded-border" and/or "fixed-width" and/or "blue-background". Suppose a particular table has all of these three classes. If ordering were important, you would require six CSS selectors to target all tables that have these classes instead of just the one.

If the ordering of classes is important in distinguishing between two elements, then create two different classes for them. E.g. one-two and two-one.

Upvotes: 1

Related Questions