how does the "nth-child" work?

Question

I am currently learning HTML/CSS and have a difficulty. My HTML is :

header
{
    display: flex;
}

header:nth-child(1)
{
    flex: 1;
    background: white;
}

header:nth-child(2)
{
    flex: 2;
    background: black;
}

<header>
    <div id = "Titre Principal">
        <img src = "images/zozor_logo.png" alt = "Logo de Zozor"/>
        <h1 class = "zouz"> Zozor </h1>
        <h2 class = "hoodie"> Carnets de voyage </h2>
    </div>
    <nav>
        <ul class = "hoodie">
            <li><a href = "#"> ACCUEIL </a></li>
            <li><a href = "#"> BLOG </a></li>
            <li><a href = "#"> CV </a></li>
            <li><a href = "#"> CONTACT </a></li>
        </ul>
    </nav>
</header>

The problem is that I get this instead of this

What is going wrong ? What theoretical did I missed ?

Quite weird, in the ttorial i'm following (openclassroom) the code is : `.element:nth-child(1) { flex: 2; } .element:nth-child(2) { flex: 1; }` — Doe Jowns, Sep 01 '17 at 08:38
Sure, but `header:nth-child(1)` means "`
` that is the first child of its parent". You want "first child of the `
`". — Niet the Dark Absol, Sep 01 '17 at 08:40

score 1 · Accepted Answer · answered Sep 01 '17 at 08:50

header:nth-child(1)

means:

For every element that is the first child of its parent

Which only targets your top most element. It is the first child of its parent (body)

you could also rewrite this as

header
{
  display: flex;
}

div:nth-child(1)
{
  flex: 1;
  background: white;
}

nav:nth-child(2)
{
 flex: 2;
 background: black;
}

how does the "nth-child" work?

1 Answers1