More that one CSS Selectors at a time

More that one CSS Selectors at a time
0

#1

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 ?


#2

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>

#3

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


#4

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.


#5

It is also worth noting that browsers do selector matching right to left.


#6

Thanks to the asker and for everyone’s reply on this–
I’d seen this too and was wondering when I’d learn it!


#7

Thanks for helping me out. I got that.