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).


#19

Would it be correct to state that ID’s can also be used as chaining selectors in CSS?
eg: h3#destination


#20

It would work, although unnecessary to write that way. There can only be one #destination, and chaining it to a type selector will have no bearing on the specificity.

<h3 id="destination">An id is all that's needed</h3>

A class is not confined to a single instance, or any particular type so can be chained to all manner of type selectors.

h3.special

p.special

ul.special

Chaining a class to a type is far more utilitarian than chaining an id, which is ultra-specific.


#21

If in our particular exercise Top Vacation Spots we wanted ALL headings with class="destination" to be cursive, then I think you’re probably right to suggest that it would be cleaner, tidier, and more logical to just use the class as the CSS selector (as to add an h2 would be redundant).

However, in our particular exercise this is not the case. We have both <h2> and <h4> elements with class="destination" and I think the idea is that we only want the <h2>s to be cursive. So, as both @mtf and @stetim94 have illustrated in their posts, we need to chain our CSS selector so that it only applies to:

If we substitute the <p> in @stetim94’s example with <h4> then this more closely mirrors what is going on with the headings in our particular exercise Top Vacation Spots (and obviously with cursive script rather than the colour red).

NB: The <h4> headings in our exercise are the destinations in the unordered list at the bottom of the page.


#22

someone can please tell me the answer for this in more specific way? thank you