Nth-child Targeting Every Other Child But Always Including The Last

Question

I'm trying to figure out a CSS nth-child formula to target every other child, but always including the last child.

For example:

• With 1 child, it will target the single child.
• With 2 children it will target the 2nd child.
• With 3 children it will target children 1 and 3.
• With 4 children it will target children 2 and 4.
• With 5 children it will target children 1 3 and 5.

And so on...

Is this possible with only CSS? I'm okay with using something other than or in addition to nth-child but trying to stay CSS only.

Answer 1

Is this fine for you?

li:nth-last-child(2n+1) {
  color: red;
}

<ul>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul>
 <li>item</li>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul>
 <li>item</li>
 <li>item</li>
 <li>item</li>
</ul>

<ul>
 <li>item</li>
 <li>item</li>
</ul>

<ul>
 <li>item</li>
</ul>