E:nth-child(n)

oddと2n+1は奇数、evenと2nは偶数。
例えば、E:nth-child(odd)の場合「奇数番目の要素が E だった場合」に適用。

E:nth-child(odd)
E:nth-child(even)

  1. E:nth-child(n)
  2. E:nth-child(n)
  3. E:nth-child(n)
  4. E:nth-child(n)
  5. E:nth-child(n)
  6. E:nth-child(n)
  7. E:nth-child(n)
  8. E:nth-child(n)
  9. E:nth-child(n)
  10. E:nth-child(n)
  11. E:nth-child(n)
  12. E:nth-child(n)

E:nth-child(2n+1)
E:nth-child(2n)

  1. E:nth-child(n)
  2. E:nth-child(n)
  3. E:nth-child(n)
  4. E:nth-child(n)
  5. E:nth-child(n)
  6. E:nth-child(n)
  7. E:nth-child(n)
  8. E:nth-child(n)
  9. E:nth-child(n)
  10. E:nth-child(n)
  11. E:nth-child(n)
  12. E:nth-child(n)

html

<div id="nth-child-1">

    <h2>
<span class="odd">E:nth-child(odd)</span><br />

      <span class="even">E:nth-child(even)</span>
</h2>

    <ol>

      <li>E:nth-child(n)</li>

～略～

      <li>E:nth-child(n)</li>

    </ol>

  </div>

  <div id="nth-child-2">

    <h2>
<span class="odd">E:nth-child(2n+1)</span><br />

      <span class="even">E:nth-child(2n)</span>
</h2>

    <ol>

      <li>E:nth-child(n)</li>

～略～

      <li>E:nth-child(n)</li>

    </ol>

  </div>

css

#nth-child-1 li:nth-child(odd),

 #nth-child-2 li:nth-child(2n+1){

 background-color:DarkOliveGreen;

 color:WhiteSmoke;

}



 #nth-child-1 li:nth-child(even),

 #nth-child-2 li:nth-child(2n){

 background-color:DarkSlateGray;

 color:WhiteSmoke;

}

Xn+Y / Y番目の要素からスタート、何も指定しなかったら0。その後、X個おきに繰り返す。

なので、3n+1や4n+10だとこうなる。

E:nth-child(3n+1)
E:nth-child(3n)

  1. E:nth-child(n)
  2. E:nth-child(n)
  3. E:nth-child(n)
  4. E:nth-child(n)
  5. E:nth-child(n)
  6. E:nth-child(n)
  7. E:nth-child(n)
  8. E:nth-child(n)
  9. E:nth-child(n)
  10. E:nth-child(n)
  11. E:nth-child(n)
  12. E:nth-child(n)
  13. E:nth-child(n)
  14. E:nth-child(n)
  15. E:nth-child(n)
  16. E:nth-child(n)
  17. E:nth-child(n)
  18. E:nth-child(n)
  19. E:nth-child(n)
  20. E:nth-child(n)

E:nth-child(4n+10)
E:nth-child(4n+3)

  1. E:nth-child(n)
  2. E:nth-child(n)
  3. E:nth-child(n)
  4. E:nth-child(n)
  5. E:nth-child(n)
  6. E:nth-child(n)
  7. E:nth-child(n)
  8. E:nth-child(n)
  9. E:nth-child(n)
  10. E:nth-child(n)
  11. E:nth-child(n)
  12. E:nth-child(n)
  13. E:nth-child(n)
  14. E:nth-child(n)
  15. E:nth-child(n)
  16. E:nth-child(n)
  17. E:nth-child(n)
  18. E:nth-child(n)
  19. E:nth-child(n)
  20. E:nth-child(n)

css

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

li:nth-child(4n+10){

 background-color:LavenderBlush;

}


li:nth-child(3n),

li:nth-child(4n+3){

 background-color:aliceblue;

}

E:nth-child(n)だと上手くいかないパターン。

html

<h2>E:nth-of-type(n)</h2>

<p>Lorem ipsum dolor sit amet,～Donec sollicitudin. </p>

<h2>E:nth-of-type(n)</h2>

<p>Lorem ipsum dolor sit amet,～Donec sollicitudin. </p>

css

h2:nth-child(odd) {

 background-color:SteelBlue;

 color:WhiteSmoke;

}


h2:nth-child(even) {

 background-color:Olive;

 color:WhiteSmoke;

}

<h2>は奇数番目にしか登場しないのでこうなる。

h2:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

h2:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

h2:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

n番目の E に適用するには

E:nth-of-type(n)

css

h2:nth-of-type(odd) {

 background-color:SteelBlue;

 color:WhiteSmoke;

}


h2:nth-of-type(even) {

 background-color:Olive;

 color:WhiteSmoke;

}

E:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

E:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

E:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

E:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

E:nth-of-type(n)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus porttitor metus, nec placerat purus eleifend nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in leo sem. Aenean non orci lacus. Donec sollicitudin.

E:nth-last-child(n)
E:nth-last-of-type(n)

width:337px;のulに、floatで並べたliが4つ、それぞれpadding-right:5pxを指定。
liのなかには80pxのimgがリンク付きで入っている場合。
通常、ulのwidth不足((80+5)*4=340px-337px=3px足りない)でカラム落ちする。

画像にするとこんな感じ。
画像にするとこんな感じ

最後の要素のpaddingを余分なclassを追加せずにとってみよう。

li:nth-last-child(1) / ( nth-childを最後から数える )を使ってみる。

/*最後の要素がliだった場合、paddingを0に。*/

li:nth-last-child(1){

padding-right:0;

border:1px solid tomato;/*効いてるか確認しやすくする為に*/

}

li:nth-last-of-type(1) /( nth-of-typeを最後から数える )を使ってみる。

/*最後のli要素のpaddingを0に。*/

li:nth-last-of-type(1){

padding-right:0;

border:1px solid tomato;/*効いてるか確認しやすくする為に*/

}

<li>は簡単だなぁ。

WordPressで画像挿入時、左寄せ(右寄せ)を設定した時のようにimgにfloatが付与される場合。

WordPressだとclass="alignleft"みたいな感じだけど、今回はstyleで省略。

html

<p>

<a href="#"><img src="" style="float:left" /></a>

<a href="#"><img src="" style="float:left" /></a>

<a href="#"><img src="" style="float:left" /></a>

<a href="#"><img src="" style="float:left" /></a>

</p>

css

img:nth-last-child(1),img:nth-last-of-type(1){

padding-right:0;

border:1px solid tomato;

}

img:nth-last-child(1)

img:nth-last-of-type(1)

aの中にimgは1つしかないので全部に反応してしまう。

じゃあ<a>を選択してみる。

 a:nth-last-child(1),a:nth-last-of-type(1){

padding-right:0;

border:1px solid tomato;

}

a:nth-last-child(1)

a:nth-last-of-type(1)

あれ、なんでimgが飛び出るんだろう?(Firefoxだとaにborderがつく、chromeはborder付かない)。 でももう一息な感じ。

その中のimgを指定すればいいのか。

擬似クラスの後にセレクタを追加するのって見慣れてないから出来ないと決めつけてたところがあった、反省。

a:nth-last-child(1) img

a:nth-last-of-type(1) img

要素が1つだけの場合は?

一緒にテキスト

要素が1つだけの場合は?

一緒にテキスト

このページは乱雑モックアップのサンプルページです。