css selector get 2 elements

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?


solution

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>