CODEWITHSUNDEEP
css
Mark Kenny
Mark Kenny

Reputation: 1638

css select every 2nd element in mixed list

There are a lot of questions of this nature but I cannot find a solution to the following:

<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
<div class="row"></div>
<div class="noRow"></div>
...

I would like to change the background colour of every second .row

I've tried:

.row:nth-child(odd)

Nothing changes

.row:nth-child(even)

Changes the background colour for all .row elements

Upvotes: 1

Views: 514

Answers (1)

Weafs.py
Weafs.py

Reputation: 22992

Use .row:nth-child(4n - 1) or .row:not(:nth-child(4n + 1)).

.row:nth-child(4n - 1) {
  background-color: red;
}
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>
<div class="row">Row</div>
<div class="noRow">noRow</div>

Upvotes: 4

Related Questions