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

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

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

14 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

9 Likes

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 {}
2 Likes

The purpose of chaining is to provide one more option for selecting elements more specifically?

Chaining in some cases gives greater specificity, meaning less elements get selected for the rule.

h3.special

The special class is only selected on h3 elements.

<h3 class="special"></h3>
<div class="special"></div>

Only the h3 above is selected, not the div.

1 Like

Thanks for your help.

1 Like

Dear @mtf (and dear coding fellowship),

inspired by your always insightful explanations — mainly this one that I am replying to —, also as part of my Codecademy’s Cheatsheet project, and finally for pure learning’s sake, I’ve coded a page — which I’ve later on expanded to a whole site :laughing: It can be checked thru my avatar pop-up (thanks once again, @mtf!!! :wink: )

I was trying to put to the test all this specificity issue, to see how much I could learn by doing it on my own. On the home page of the site, I’ve practiced HTML tables with a CSS hierarchy table, and I was wondering if you could give me your opinion about it.

Although, I’d be rather interested to know your opinion about the conclusions I’ve drawn on the page that I’ve mentioned at first, where I’ve tried to test CSS specificity as much as I’ve been able to.

By practicing on this today, I also got a question about CSS.

For the header of the site, I’ve tried overlaying a color to an image using the opacity property over the former, so that I would color the image. I’ve used this piece of code, which is doing the trick but, at the same time, obviously yielding errors:

header {
    background-image: url("bg.png") z-index: inherit 1;
    background-color: rgb(0,0,255,0.5);
    padding: 25px;
}

I’ve researched on Stack Overflow, and it seems like I can do it by overlaying two different ‘containers’. I was just wondering if there’s a way that you can do it in just one. Like trying to tell “the machine” to:

1.- Place an image
2.- Place a color with reduced opacity.
3.- Place the color over the image using z-index.

Something tells me it should be possible or that even I might be going down the right path, but, at the same time, I don’t know how to wrap it up properly.

Anyway, sir, lot of thanks once again. Indeed, quite inspiring are those explanations of yours.

Cheers.

Give this page a read, I think it offers an alternative…

filter | CSS-Tricks - CSS-Tricks

1 Like

The h2 element still would have been styled using a class selector:
“.destination”…so was there any use of the chaining selector? it would give similar result right?