CSS选择器获得2个元素

Question

I need to select two elements, skip the next two elements, select two elements, etc.

For example, assuming I have 10 elements:

<div class="container">
    <div class="el">element1</div>
    <div class="el">element2</div>
    <div class="el">element3</div>
    <div class="el">element4</div>
    <div class="el">element5</div>
    <div class="el">element6</div>
    <div class="el">element7</div>
    <div class="el">element8</div>
    <div class="el">element9</div>
    <div class="el">element10</div>
</div>

I want select the elements 1, 2, 5, 6, 9, and 10.

Is there any way, utilizing nth-child or similar, to achieve this?

Answer 1

Use the :nth-child() pseudo-class for this.

Combine selectors in order to select the first/second element for each four elements.

Example Here

.container > .el:nth-child(4n+1),
.container > .el:nth-child(4n+2) {
    color: red;
}

 .container > .el:nth-child(4n+1), .container > .el:nth-child(4n+2) { color: red; } 

 <div class="container"> <div class="el">element1</div> <div class="el">element2</div> <div class="el">element3</div> <div class="el">element4</div> <div class="el">element5</div> <div class="el">element6</div> <div class="el">element7</div> <div class="el">element8</div> <div class="el">element9</div> <div class="el">element10</div> </div>