What does it do? In what situation would I use this?
header#main-header h1 { … }
What does it do? In what situation would I use this?
header#main-header h1 { … }
It is being use for styling the header tag, id and the h1 tag in CSS
Why not just use: header, #main-header, h1 { ... }
?
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.
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
).