Search code examples
htmlcsschildren

Is there a shortcut to change color of 2 children in css?


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;
}

Solution

  • 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)