CODEWITHSUNDEEP
csshtmlcss-selectors
Maxim Gershkovich
Maxim Gershkovich

Reputation: 47199

Why does nth-of-type() and nth-child() break with unrelated element

I am obviously missing something really fundamental but I have the following html

<div class="test-cont">

    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
</div>

and am using the following selectors

 .test-cont .row:nth-of-type(odd) {
     background: purple;
 }
 .test-cont .row:nth-of-type(even) {
     background: red;
 }

Which I believe expresses 'select the nth child items of .text-cont where class contains .row and is either odd or even'.

Yet the <div class="md-margin"></div> break these selectors.

So I end up with

enter image description here

Instead of the alternating pattern I expect. The problem is resolved when I remove the md-margin divs. What am I missing?

Upvotes: 0

Views: 258

Answers (1)

dippas
dippas

Reputation: 60573

it is because you have those md-margin divs in between, making them the even ones.

(althought :nth-of-type will show the result you want when using classes - depending on the markup -, but it refers to the element type, that's why div with md-margin are "counting" here.

snippet with md-margin

.test-cont .row:nth-of-type(4n+2) {
     background: purple;
 }
 .test-cont .row:nth-of-type(4n+4) {
     background: red;
 }
<div class="test-cont">

    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">TEST2</div>
    </div>
    <div class="md-margin"></div>
    <div class="row">
        <div class="col-md-12">HELLO WORLD</div>
    </div>
</div>

Snippet without md-margin

.test-cont .row:nth-of-type(odd)  {
  background: purple;
}
.test-cont .row:nth-of-type(even) {
  background: red;
}
<div class="test-cont">
  <div class="row">
    <div class="col-md-12">TEST2</div>
  </div>
  <div class="row">
    <div class="col-md-12">HELLO WORLD</div>
  </div>
  <div class="row">
    <div class="col-md-12">TEST2</div>
  </div>
  <div class="row">
    <div class="col-md-12">HELLO WORLD</div>
  </div>
</div>

Upvotes: 1

Related Questions