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`?

<p>plain paragraph</p>
<p class="note">note class paragraph</p>
<p class="note italic">note class paragraph with added italic class</p>
p {
    font-size: 1em;
    line-height: 1.5em;
}
p.note {
    width: 90%;
}
p.note.italic {
    font-style: italics;
}

The first will apply to all paragraphs; the second applies to only paragraphs with class="note"; the last applies to only those paragraphs with class="note italic".

4 Likes

Interesting!

So, could we use a class="italic" somewhere else in our html (theoretically, speaking)?

Do we not need to insert a hyphen into class="note-italic"? Or is the absence of a hyphen indicating that this is in fact 2 classes merged into one?

Sorry, if this sounds crazy in practice, I guess I’m thinking through the theory…

1 Like

Yes, without a problem.

That would be an entirely different singular class. When we separate class names on an element, they are two classes that both apply to that element. We chain them in a selector if we want that specificity… both classes MUST exist on the element.

5 Likes

Yes - sorry, when you were replying I realised I hadn’t seen the all important “full stop/period” between note.italic in your CSS code!! :upside_down_face:

If I’d scrutinised more closely, I would have got it without having to post the question :wink:

3 Likes

Wrong it is this:

  1. #special
  2. h1.special
  3. .special
    4.) h1
1 Like

Are you referring to the cascade order?

As a rule, I place generic type selectors at the top of the cascade where the specificity is lowest and the reach is the broadest.

h1
.special
h1.special
h1#special

Rules lower down can override rules above them.

2 Likes

Is it possible to daisychain multiple tags and selectors? For example if I wanted all h1 and h2 elements containing class=“special” would that be possible? Or would I have separate them like

h1.special{}
h2.special{}
?

Not chain, but comma separated list,

h1.special,
h2.special {

}

The selectors are independent of each other but share the same selector ruleset.

8 Likes

Just like a short off-topic FYI, the length of your two “spoiler” words is different and so one can basically still see which one is which without clicking. Probably not the end of the world, though, so sorry for nitpicking.

1 Like

Sorry to revive this thread but I am still a little bit confused with this chaining thing. In your example you wrote:
p.note.italic {
font-style: italics;
}
I understand that this particular class adds the “note italic” styling to the paragraphs specifying “note italic” class. But can we combine two classes without putting an element first? Meaning, to create a .note.italic class, without specifying any element.

Chaining is best viewed in the HTML…

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

When testing in your browser, toss in the variations…

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

Each of these have different selector options.

p {}
.note {}
.italic {}
p.note {}
p.italic {}
p.note.italic {}
.note.italic {}

The chain is more specific than otherwise. It means A AND B whether chained to a type or not. With a type it is P AND A AND B.

It is important to note that a chain is only a chain if there is no whitespace separating the selectors.

p .note .italic

is NOT the same as,

p.note.italic

by any stretch. Completely different. The latter is a single selector that targets a single element (or group of elements that match) whereas the former is targeting CHILD elements.

class italic that is child of class note that is child of P

1 Like

Thank you! I will read more on the subject as I want to make completely sure that I get this before going deeper on CSS.

1 Like