(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:
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
Note: I've labeled this as SCSS and CSS in case there are two answers
4 Replies
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 spaceok 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 questionsJust 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 bothOh this is a very powerful distinction thank you