What does this mean?

HTML-CSS
1

What does it do? In what situation would I use this?

header#main-header h1 { … }
2

It is being use for styling the header tag, id and the h1 tag in CSS

3

Why not just use: header, #main-header, h1 { ... } ?

4

Contextual CSS styling

It means the h1 tag within header tag with the id “main-header” will get the styling.

It is different from header, #main-header, h1 because this is three different tags that will get the same styling. Whereas the above only 1 tag gets styled.

1 Like
5

That means something totally different. It means apply ... (your style rules) to header, #main-header, and h1.

But header#main-header h1 means any h1 inside a header element with the ID of main-header (header#main-header => it applies only to elements that are a header AND a #main-header).

1 Like