KPC
Kevin Powell - Community•17mo ago
elbi3

(CSS/SCSS) Syntax Question on Selector Declaration

Quick question for you all: Can you chain selectors when defining a CSS/SCSS ruleset? Or did I wake up with some JavaScript madness in my brain? I wanted to do something like this: 
header.hero {
    display: grid;
    grid-template-areas: "hero";
}
header.hero {
    display: grid;
    grid-template-areas: "hero";
}
I was hoping this would remind my future self that the generic "header" selector should use the class component name "hero".
Note: I've labeled this as SCSS and CSS in case there are two answers
4 Replies
Jochem
Jochem•17mo ago
that will select any header element with the hero class on it, definitely in CSS and as far as I understand it, also in SCSS so <header class="hero">, not <header><div class="hero">, the latter would be selected by header .hero with a space
elbi3
elbi3OP•17mo ago
ok so if I write it that way it will compile? I will be so happy if this is a feature I can use 🤩 for <header><div class="hero"> would it be header > .hero {} or is the karat not needed? whatever > this guy is called thanks @Jochem , I'll follow-up with some MDN reading *so that you don't need to answer my follow-up questions
Jochem
Jochem•17mo ago
Just a space is enough if you want any descendant, the greater than will change that to only match direct descendants so with the >, you'd match <header><div class="hero"> but not <header><section><div class="hero">, where without the >, it would match both
elbi3
elbi3OP•17mo ago
Oh this is a very powerful distinction thank you

Did you find this page helpful?