How do I select every other even child and adjacent child?

May 31, 2022

I want to select in order 2,3 then 6,7 and then 10 Image attached for desired result. So How do I select these with nth-child or something else? It’ll go something like this…

(1)(2)
(3)(4)
(5)(6)
(7)(8)
(9)(10)

>Solution :

You could solve this with :nth-child using two formulas, one for the even numbers and one for the even ones. This is a working example of my suggestion:

<style>
    li:nth-child(4n - 2), li:nth-child(4n - 1) { color: red; }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

The 4n part provides the "every other even/odd" part you’re looking for: it will select one every 4 items. The -1 and -2 offset this interval to match the numbers you want. You could get the inverse behaviour (select 1, 4, 5, 8, 9, etc) when using offsets +1 and 0