Simple Nesting Question

Question

I have a a class:

.header { background-color: #233574}

I want to to style h1, h2, h3, h4, h5, h6 within my class only. I thought that this was writteng like so:

.header{}
.header h1 h2 h3 h4 h5 h6 { color: #FFFFFF} //Style these elements within the .header class

<div class="header">
<h1>Header</h1>
</div>

What am I doing wrong? The h elements are still not pickign up the style?

Answer 1

What you're doing will style only h6 tags that are within h5 tags that are within ... and finally nested within .header. If you want to style each heading separately, you need to do something like this:

.header h1, .header h2, .header h3, .header h4, .header h5, .header h6
    { color: #FFFFFF} //Style these elements within the .header class