[CSS] 基本メモ: セレクタいろいろ – 端くれプログラマの備忘録

N番目に来る要素を選択する

div要素の子要素のうち2番目に来るものがp要素だったら

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

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

div要素の子要素のうち2番目に来る任意の要素

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

1	div *: nth-child(2) { color: red; }

順番指定のバリエーション

div要素の最初の子要素

div: first-child { color: red; }

1	div: first-child { color: red; }

div要素の最後の子要素

div: last-child { color: red; }

1	div: last-child { color: red; }

div要素の子要素が１つだけある場合

div: onl-child { color: red; }

1	div: onl-child { color: red; }

div要素の子要素のp要素のうち、2番目のもの

div p: nth-of-type(2) { color: red; }

1	div p: nth-of-type(2) { color: red; }

div要素の子要素のp要素のうち、最初のもの

div p: first-of-type { color: red; }

1	div p: first-of-type { color: red; }

div要素の子要素のp要素のうち、最後のもの

div p: last-of-type { color: red; }

1	div p: last-of-type { color: red; }

div要素の子要素のp要素のうち、p要素が1つだけあれば

div p: only-of-type { color: red; }

1	div p: only-of-type { color: red; }

テキスト型の入力項目でdisabledのもの

input [type="text"]:disabled { font-weight: bold; }

1	input [type="text"]:disabled { font-weight: bold; }

ラジオボタン型の入力項目でチェックされているもの直後にあるラベル

input [type="radio"]:checked+label { font-weight: bold; }

1	input [type="radio"]:checked+label { font-weight: bold; }

スタイルシートリファレンス（目的別）
http://htmq.com/style/index.shtml#sel