header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
I learned about css selectors but what is in this syntax, i can’t understand. Is it a element selector for header or button or a class selector for .follow-btn ?
header .follow-btn button {
border: 0;
border-radius: 3px;
padding: 5px;
}
I learned about css selectors but what is in this syntax, i can’t understand. Is it a element selector for header or button or a class selector for .follow-btn ?
When css selectors are in a sequence, it will grab most inner nested element. For ex. it will select button element.
<header>
<div class = "follow-btn">
<button>Submit</button>
</div>
</header>
Spaces between CSS selectors like: first second
mean "select all second
inside an element of category first
.
https://www.w3schools.com/cssref/css_selectors.asp
The selector header .follow-btn button
will only select button
elements that are inside the class .follow-btn
that are inside a header
element.
You could see also a selector header, .follow-btn, button
, in that case, the selector will match any header
element, any .follow-btn
class and any button
element.
I’m not sure if it is too much, but you can also see like that: button.follow-btn
, in that case, only button
elements that also contains the class follow-btn
will be selected.
Thanks to the asker and for everyone’s reply on this–
I’d seen this too and was wondering when I’d learn it!
Thanks for helping me out. I got that.