css - First child selector doesn't work if header is present -

i have simple html header , sections.

<header>header</header> <section>section 1</section> <section>section 2</section> <section>section 3</section>

i style first section

section:first-child {     background-color:green;     }

it seems :first:child selector doesn't work when header present (jsfiddle). when remove header works again! why?

that's because <section> not first child of parent.

element:first-child represents first child of parent, matching element. , in case, first element of parent <header> element.

you use :first-of-type pseudo-class instead.

section:first-of-type {     background-color:green;     }

from mdn:

the :first-of-type css pseudo-class represents first sibling of type in list of children of parent element.

And