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;}

#6

¿Can you make a selector chainging two classes so that the css will only be apllied to an element that has both of the classes? For example, something like this:

CSS:
.note.italic {
font-color: red
}

So if we want to use this css and apply to an element, that element should have both classes (“note” and “italic”), otherwise, it won’t be apply.
Is there any way to make something similar to this? or you can only chain html elements with classes?

Thanks for the help.


#8

Yes. When two selectors are chained (no whitespace) they become one selector.

<p class="note"></p>
<p class="italic"></p>
<p class="note italic"></p>

Now consider:

<section>
  <p></p>
  <p></p>
  <p class="italic"></p>
</section>
<section class="note">
  <p></p>
  <p></p>
  <p class="italic"></p>
</section>
<section>
  <p></p>
  <p></p>
  <p class="italic"></p>
</section>

Now the selector will be a descendant…

section {}
p {}
.italic {}
.note {}
.note .italic {}    /* <<< this one <<< */