Can I use Nth-child to skip the first item then select 2 skip 2?

Question

I would need an nht-child rules that would match this:
◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻

I tried several combinaisons on CSS-Tricks Nth-child-tester, but nothing worked.

Is that even possible?

Answer 1

I'm not aware of any single-rule way to do it, but you can always just target two separate patterns with the same rule:

:nth-child(4n+2),
:nth-child(4n+3) {
    background: black;
}

Answer 2

This one gave me a headache, but I figured out how to do it in a single rule!!

You'd have to use the :not() selector, since it can be placed sequentially, so element:not(:nth-child(4n + 1)):not(:nth-child(4n + 4)) would do the trick.

In other words, it is selecting all, except the 1st and 4th on each 4n range...

li:not(:nth-child(4n + 1)):not(:nth-child(4n + 4)) {
    color: red;
}

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