Home > Back-end >  Is there a shortcut to change color of 2 children in css?
Is there a shortcut to change color of 2 children in css?

Time:07-15

I have the following list:

<ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3
            <ol>This is another list 1</ol>
            <ol>This is another list 2</ol>
            <ol>This is another list 3</ol>
            <ol>This is another list 4</ol>
        </li>
    </ul>

with the following css:

ul li{
    background-color: violet;
}

ul li ol:nth-child(3){
    background-color:aquamarine;
}

my question is, is there a way to change the color of children 3 and 1 other than add

ul li ol:nth-child(1){
    background-color:aquamarine;
}

CodePudding user response:

You can use ol:nth-child(odd) or calculation (see here)

Other then that you can group them if you need particular ones: ul li ol:nth-child(3), ol:nth-child(1)

  • Related