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 <<< */

#9

In my understanding,

Literally, higher specificity means more details, vice-versa, lower specificity means less details.
As tag has a wide range of affecting elements in HTML so It’s ‘not specific’ to indicate certain part in HTML,
Yet ID has a narrower range of affecting elements in HTML so It is ‘very specific’ to indicate certain part in HTML.
In this manner, If we look at those 3 examples shown above, #sepcial, h1.special, .special.

.special - cover all the elements which have class .special
h1.special - cover all the elements which must contain h1 tag and class .special
#special - cover very specific element with ID #special

SO order is #special - h1.special - .special


#10

elements? Ids should be unique, so element.


#11

Thanks for correction!
and Sorry for my bad English :joy::joy::joy:


#12

Why use

h2.destination {

}

for the h2 element if you can just label the class=“destination” and use the following CSS selector:

.destination {

}


#13

may be applied to many elements, so a rule written for that would apply to all elements with the class.

h2.destination

is selective and will only apply to H2 elements that have the destination class.


#14

i get that part but why even use an h2.destination when I can just use a class=""?


#15

Because then the class can only be used on H2.


#16

i covered precisely this in a reply in this topic:


#18

The example given was:
h1.special {
}

Then the article says: “The code above would select ONLY the h1 elements that have a class of special . If a p element also had a class of special , the rule in the example would not style the paragraph.”.

ANSWER: The chaining rule above has excluded the style application to the p element by marriage of the special class to the heading h1 element. Although it has the special class, p is NOT a heading but a paragraph element, remember. Now, as I emboldened in the lesson quote above, you even see that there are TWO conditions to be met in this “chaining” rule case:

1 - Be a h1 AND
2. Have the class special .

That’s why it says "…the rule in the example would not style the paragraph.”…The heading h1 condition shut the door on the paragraph. In simpler words, the chain rule demands TWO conditions (1 & 2 above), only one of which is met by the paragraph element (condition 2).