More that one CSS Selectors at a time

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 ?

1 Like

When css selectors are in a sequence, it will grab most inner nested element. For ex. it will select button element.

<div class = "follow-btn">
1 Like

Spaces between CSS selectors like: first second mean "select all second inside an element of category first.

1 Like

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.


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


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.