selector:nth-child(an+b)

選取符合偽類別an+b規則的元素
an+b中的n為系統自動抓取值，無法人為控制，而a與b則為數字
使用範例說明會更加簡單

範例(一)

div p:nth-child(3)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>
<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>

div p:nth-child(3) {
  color: red;
}

說明

當:nth-child(an+b)我們只給單一數字b做為參數時，代表只會抓取第b個元素

選擇器 div p將會抓到範例中兩個div的所有p元素
接著套用偽類別:nth-child(3)抓取其中第三個p元素
因此兩個div元素中的第三個p元素的文字顏色都將變為紅色

範例(二)

div p:nth-child(2n)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>
<hr>
<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>

CSS

div p:nth-child(2n) {
  color: red;
}

說明

當:nth-child(an+b)我們只給an做為參數時，代表只會抓取第a * n個元素

選擇器 div p將會抓到範例中兩個div的所有p元素
接著套用偽類別:nth-child(2n)抓取其中符合2n元素
因此兩個div元素中的第2*0、2*1、2*2、2*3的p元素的文字顏色都將變為紅色
而由於2*0 = 0因此只會看到第2, 4, 6個p元素變色。

範例(三)

ol li:nth-child(3n+1)

HTML

<ol>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
  <li>Hello CSS3</li>
</ol>

CSS

ol li:nth-child(3n+1) {
  color: red;
}

說明

選擇器 ol li將會抓到範例中ol的所有li元素
接著套用偽類別:nth-child(3n+1)抓取其中第3n+1個li元素
因此ol元素中第3*0+1、3*1+1、3*2+1、3*3+1 .. 的li元素的文字顏色都將變為紅色

範例(四)

div p:nth-child(3n+1)

HTML

<div>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <h5>Hello CSS3</h5>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
  <p>Hello CSS3</p>
</div>

CSS

h5 {
    color:blue;
}

div p:nth-child(3n+1) {
  color: red;
}

說明
我們設定第3n+1個p元素要變為紅色，但此時第4個元素剛好不是p元素時
這時的h5當然會式樣是設定中所定義的藍色，但該h5依然屬於an+b中的一個n
因此下一個變為紅色的p元素依然是子元素中的第7個元素p而不是第8個元素p。

結語

偽類別:nth-child(an+b)給了我們很大的彈性去選取集合中的元素
在實務上是非常常見的，因此在此花了較多的篇幅來介紹它
希望能給還沒使用:nth-child(an+b)的朋友有所啟發