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



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.


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:


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.


Rules lower down can override rules above them.


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


Not chain, but comma separated list,

h2.special {


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


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 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,


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


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

Will chained selector for id and tag look like, for instance, h1#special??? Or does chaining work only for classes within tags?

That is a valid selector, but redundant. Chaining in the this case does nothing to increase specificity since ID is unique, already, and has high specificity on its own. If the ID is on the H1, just selecting the #id will be sufficient enough.

When we look at a parent with the ID, that contains an H1, that would be different, but also not chaining. It would be a combinator.

#special h1 {}
1 Like