Попытка понять селектор css nth-of-type

Question

Я пытаюсь понять, почему этот селектор nth-of-type работает не так, как ожидалось. Моя цель состоит в том, чтобы сделать первый элемент .row красным, а все остальные после первого синего, оставив элементы зелеными, как есть.

https://jsfiddle.net/darrengates/pa34zyjd/14/

.wrapper div { 
 
    width: 200px; 
 
    background-color: green; 
 
    color: white; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.wrapper .row:nth-of-type(n+1) { 
 
    background-color: red; 
 
} 
 
.wrapper .row:nth-of-type(n+2) { 
 
    background-color: blue; 
 
}

<div class="wrapper"> 
 
    <div class="option">option</div> 
 
    <div class="button">some button</div> 
 
    <div class="row">I wanna be red</div> 
 
    <div class="row">I wanna be blue</div> 
 
    <div class="row">I wanna be blue</div> 
 
    <!-- all other row elements after the first should be blue --> 
 
</div>

Answer 1

Селектор n-th-of-type относится к типу тега на том же уровне, не класс, в этом случае div метки, которые братья внутри .wrapper , Поэтому вам нужен этот CSS, так как они являются третьим и четвертым div там:

.wrapper .row:nth-of-type(n+3) { 
    background-color: red; 
} 
.wrapper .row:nth-of-type(n+4) { 
    background-color: blue; 
} 

https://jsfiddle.net/cb3qd8t6/

Answer 2

nth-* селекторы искать только для типа элемента не имя класса. В вашем примере, я хотел бы использовать ~ или + сделать это:

.wrapper div { 
 
    width: 200px; 
 
    background-color: green; 
 
    color: white; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.wrapper .row { 
 
    background-color: red; 
 
} 
 
.wrapper .row ~ .row { 
 
    background-color: blue; 
 
}

<div class="wrapper"> 
 
    <div class="option">option</div> 
 
    <div class="button">some button</div> 
 
    <div class="row">I wanna be red</div> 
 
    <div class="row">I wanna be blue</div> 
 
    <div class="row">I wanna be blue</div> 
 
    <!-- all other row elements after the first should be blue --> 
 
</div>