Clever Geek Handbook

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


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


source


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>
Run codeHide result


+5


source






More articles:


All Articles