N番目に来る要素を選択する
div要素の子要素のうち2番目に来るものがp要素だったら
div p: nth-child(2) { color: red; }
div要素の子要素のうち2番目に来る任意の要素
div *: nth-child(2) { color: red; }
順番指定のバリエーション
- 2 – 2番目
- odd – 奇数番目
- even – 偶数番目
- 3n – 3の倍数(3,6,9,12,…)
- 3n+1 – 3の倍数+1(4,7,10,13,…)
div要素の最初の子要素
div: first-child { color: red; }
div要素の最後の子要素
div: last-child { color: red; }
div要素の子要素が１つだけある場合
div: onl-child { color: red; }
ある要素のうちN番目に来る要素を選択する
div要素の子要素のp要素のうち、2番目のもの
div p: nth-of-type(2) { color: red; }
div要素の子要素のp要素のうち、最初のもの
div p: first-of-type { color: red; }
div要素の子要素のp要素のうち、最後のもの
div p: last-of-type { color: red; }
div要素の子要素のp要素のうち、p要素が1つだけあれば
div p: only-of-type { color: red; }
要素の状態から選択する
テキスト型の入力項目でdisabledのもの
input [type="text"]:disabled { font-weight: bold; }
ラジオボタン型の入力項目でチェックされているもの直後にあるラベル
input [type="radio"]:checked+label { font-weight: bold; }
参考サイト
スタイルシートリファレンス（目的別）
http://htmq.com/style/index.shtml#sel