Select odd items except first child

Question

I have div elements like this

<div id="container">
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
    <div id="content">
        <div class="arrow"></div>
    </div>
</div>

I want to choose the first child, but I have css like this

#container #content:nth-child(odd) .arrow {
    background: red;
}
#container #content:nth-child(even) .arrow {
    background: green;
}
#container #content:first-child .arrow {
    background: pink;
}

But then the first child is red, because the first child is an odd number.

I tried using this and I don’t know if it will work and it doesn’t

#container #content:nth-child(odd):not(:first-child) .arrow {
    background: red;
}

But then the first arrow of the div is still red.

What am I doing wrong?

Answer 1

:nth(odd)is just a shortcut for :nth(2n+1)if memory serves, so I think it :nth(2n+3)might work.

Answer 2

Try the following:

#container #content:first-child .arrow {
    background: pink!important;
}

This gives priority to this value.

Hello!