nth-of-type odd / even not working as expected

Question

It works perfectly if I remove the first div.

But if I have the first div without the class, it doesn't work correctly.

Test 1 should be blue and the next test should be red, and so on.

When I have another div, it doesn't work correctly. How do I solve this issue?

.el:nth-of-type(odd) {
  background-color: blue;
}
.el:nth-of-type(even) {
  background-color: red;
}

<div id="content">
  <div>nothing</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
</div>

http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107 This one might also answer your question — Zim84, Sep 28 '16 at 20:34
Could you have a variable number of divs without the el class at the top? — j08691, Sep 28 '16 at 20:35

Johannes · Answer 1 · 2019-08-05T21:01:10.587

In your particular case, you could simply reverse the CSS rules for odd and even nth-of-type (see snippet). The nth-of-type refers to the tag, i.e. the divelement, not the class, therefore also counting the first div which doesn't have a class.

Since your CSS rule selectors combine the class with the nth-of-type, the first div isn't affected, since it doesn't have a class, yet the counting for odd or even starts at the first div.

.el:nth-of-type(odd) {
 background-color: red;
}

.el:nth-of-type(even) {
 background-color: blue;
}

<div id="content">
    <div>nothing</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    <div class="el">Test 1</div>
    </div>

score 2 · Answer 2 · answered Sep 28 '16 at 20:25

How do I solve this issue?

Change the first div to another element, so it gets skipped by nth-of-type.

.el:nth-of-type(odd) {
  background-color: blue;
}
.el:nth-of-type(even) {
  background-color: red;
}

<div id="content">
  <span>nothing</span>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
</div>

nth-of-type odd / even not working as expected

2 Answers2