More that one CSS Selectors at a time

HTML-CSS
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 ?

1 Like
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>
1 Like
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

1 Like
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.

2 Likes
5

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

2 Likes
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.