
リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。
奇数番目の要素にスタイルを適用する
<span style="font-size: 130%;">li:nth-child(odd){
background: #ff8080;
}</span>参照サイト:http://ideahacker.net/2013/06/28/5571/
odd(奇数)、even(偶数)による指定方法
:nth-child(odd) ・・・ 奇数の要素を選択。
:nth-child(even) ・・・ 偶数の要素を選択。
n番目の要素を指定する
E:nth-child(n)
E:nth-of-type(n)Eに指定したいHTML要素(Element)を書き、nにEの親要素の中で何番目を指定したいか値を書く。
参照サイト:https://stocker.jp/diary/nth-child/
もっとくわしく・・・
first-childの使い方
http://www.htmq.com/selector/first-child.shtml
何番目系のCSSリスト
| 種類 | -child | -of-type |
|---|---|---|
| 最初 | :first-child | :first-of-type |
| 最初の要素 (親要素から見て、子要素すべての最初) | ある要素の最初 (親要素から見て、ある子要素の最初) | |
| 最後 | :last-child | :last-of-type |
| 最後の要素 (親要素から見て、子要素すべての最後) | ある要素の最後 (親要素から見て、ある子要素の最後) | |
| n番目 | :nth-child(n) | :nth-of-type(n) |
| n番目 | ある要素のn番目 | |
| 後ろからn番目 | :nth-last-child(n) | :nth-last-of-type(n) |
| Xの倍数 | :nth-child(Xn) | :nth-of-type(Xn) |
| X番目からYまで | :nth-child(n+X) | ←X番目以降(X番目から最後まで) |
| nth-of-type(n+X) | ←ある要素のX番目以降(X番目から最後まで) | |
| :nth-child(-n+X) | ←X番目以前(最初からX番目まで) | |
| 1個だけ | :only-child | :only-of-type |
| 1個だけ子要素がある(親要素から見て、子要素が1個だけある) | 1個だけある子要素がある(親要素から見て、ある子要素が1個だけある) |
