Oes a “chained” selector have a higher specificity than a class or id selector? For example, which selector would “win”: `.special` or `h1.special` or `#special`?


#1

Question

Does a “chained” selector have a higher specificity than a class or id selector? For example, which selector would “win”: .special or h1.special or #special?

Answer

A chained or qualified selector has a higher specificity than a class selector but a lower specificity than the id selector. Hence, assuming these selectors are all targeting the same HTML tag, the specificity from highest to lowest would be:
1) #special
2) h1.special
3) .special


FAQ: Learn CSS Selectors Visual Rules - CSS Setup Selectors - Chaining Selectors
#2

It stated “if a p element also had a class of special the rule in the example would not style the paragraph element”. Why is this so and how to style p element then?


#3

this post/topic is about resolving conflicting css property applied to the same element, lets start simple:

<p>i am red</p>

p {
    color: red;
}

the paragraph would be red, but what about:

<p>i am some color</p>

p {
    color: red;
}

p {
    color: aqua;
}

now what color will the paragraph be? the answer is: aqua

both selectors have the same specificity, so the latest styling gets applied.

Okay, what about:

<p class="color">i am some color</p>


.color {
    color: red;
}

p {
    color: aqua;
}

what color will the paragraph be? The answer: red

the class selector has a higher specificity, as such, that color is applied to the paragraph even though the p css selector is defined later.

finally:

<p class="color">i am some color</p>


.color {
    color: red;
}

p {
    color: aqua;
    font-size: 32px;
}

what font-size will the paragraph be? answer: 32px

the class selector doesn’t specify a font-size, so there is no conflicting property, so the font-size of p css selector simply gets applied


#4

I am understanding how to style the paragraph but does the statement that i previously stated actually means that we cannot style two different elements(h2 and p) of same class(special)?


#5

why not? Its perfectly possible:

<h2 class="special">some text</h2>
<p class="special">some text</p>

.special {
    color: red;
}

both h2 and p are red.

however, if you do:

h2.special {color: red;}

only h2 will be red, because h2.special selector rules mean: target all h2 element with class special. So h2 without class special are not affected by h2.special:

<h2 class="special">i am red</h2>
<h2>i am not</h2>
<p> class="special">me neither</p>

h2.special {color: red;}