Как стилизовать кратные 3 элемента li

Question

Я хочу стилизовать только несколько элементов из трех элементов «li». как это сделать?

HTML:

<div class="test"> 
<ul> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
    <li>content</li> 
</ul> 

</div> 

CSS:

.test ul li:nth-child(n+3){background:#000;} 

Answer 1

Вы можете сделать это :nth-child(3n+3) или :nth-child(3n), если вы хотите, чтобы начать от третьего li элемент

ul li:nth-child(3n+3) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
</ul>

или :nth-child(3n), если вы хотите начать с первого элемента

ul li:nth-child(3n+1) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
    <li>content</li> 
 
</ul>

Answer 2

Это то, что вы ищете:

.test ul li:nth-child(3n) { 
    background:#000; 
}