Can I use Nth-child to skip the first element then select 2 skip 2?
I need nht-child rules to match this:
◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻ ◻ ◼ ◼ ◻
I tried several combinations on CSS-Tricks Nth-child-tester but nothing worked. Is it possible?
+3
Simon arnold
source
to share
2 answers
I don't know of a single rule for this, but you can always just target two separate templates with the same rule:
:nth-child(4n+2),
:nth-child(4n+3) {
background: black;
}
+7
Joe
source
to share
This person gave me a headache, but I figured out how to do it in one rule!
You will need to use a selector :not()
as it can be placed sequentially, so element:not(:nth-child(4n + 1)):not(:nth-child(4n + 4))
will do the trick.
In other words, it selects everything except 1st and 4th for 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>
+5
LcSalazar
source
to share