Multiple classes with the same name? [duplicate]

Question

Multiple classes with the same name? I know it works but is it valid?

.color {color:orange;}
.first .color {color:blue;}
.second .color {color:red;}

 

<div class="color">
some text here
</div>

<div class="first">
some <span class="color"> text here</span>
</div>

<div class="second">
some <span class="color"> text here</span>
</div>

Answer 1

That's perfectly valid, and perfectly readable. Note particularly that the order the classes are declared in is not important. CSS works on the principle that the most-specific selector wins.

.color {color:orange;}

Defines that any element with class color is orange.

.first .color {color:blue;}

Defines that any element with class color that is a descendent of an element with class first is blue

.second .color {color:red;}

Defines that any element with class color that is an descendent of an element with class second is red