/*===============================================================
■ CSS3セレクタ
===============================================================*/
/* セレクタ */
* すべての要素に適用
.X 指定したクラス名(X)がある要素に適用
#X 指定したID名(X)がある要素に適用
E F 子孫要素に適用
E > F 子要素にのみ適用
E + F E要素に隣接しているF要素に適用
E ~ F E要素の後にあるF要素(CSS3〜)
/* 属性セレクタ */
E[foo] 特定の属性を持つE要素に適用
E[foo='bar'] 特定の属性(値)を持つE要素に適用する 例:input[type='button']
E[foo^='bar'] foo属性の値がbarで始まっているE要素、前方一致(bar, bar-01, barbaz...)
E[foo*='bar'] foo属性の値にbarを含むE要素(bar, foobarbaz...)、.piyo-bar も一致する
E[foo$='bar'] foo属性の値がbarで終わっているE要素(bar, bazbar,はマッチ、barbazはアンマッチ)
E[foo|='bar'] foo属性の値がbar-(ハイフン)から始まるE要素
(en-us , en-gb , en-nz , en-ca …言語でスタイルを分けたい時など)
例:E[class|="bar"]
→ <E class="bar-01"> とか <E class="bar-piyo"> はマッチ、
<E class="bar01"> などはマッチしない
/* 擬似要素・擬似クラス */
E:hover オンマウス時
E:checked ラジオボタンやチェックボックスがチェックされた状態のときのE要素
E:not(s) sでないセレクタを持つE要素 (セレクタ、またはクラス名など)
:not(セレクタ) には結合子(スペース、>、+)のあるセレクタは指定できない
E:not(:last-child) …「最後の要素ではなかったら」
li:not(:nth-child(3)) …「3番目の li 以外」
E:root 文章内のルート要素であるEという要素(HTML文書の場合、Eはhtmlとなる)
E:first-letter E要素内の最初に現れる文字にだけマッチ
E:first-line E要素内の最初の行にマッチ (幅指定なしだとブラウザ幅に依存する)
E:first-child 直上の親要素内に最初に現れる要素がEだった時だけマッチ
E:last-child 直上の親要素内に最後にある子要素がEだった時マッチ
E:only-child 直上の親要素内にある子要素が唯一E要素だけだった時マッチ
E:only-of-type 直上の親要素内の兄弟関係にある子要素の中でE要素は1つだけだった時マッチ
E:nth-child(n) 直上の親要素内の兄弟関係にあるすべての子要素のうち、n番目がEだった時マッチ
E:nth-child(odd) 直上の親要素の 奇数番目のE要素にマッチ
E:nth-child(2n+1) 直上の親要素の 奇数番目のE要素にマッチ
E:nth-child(even) 直上の親要素の 偶数番目の要素に適用
E:nth-child(2n) 直上の親要素の 偶数番目の要素に適用
E:nth-child(3n) 直上の親要素の 3,6,9,12…番目の要素に適用
E:nth-child(3n+1) 直上の親要素の 1,4,7,10…番目の要素に適用
E:nth-last-child(n) 直上の親要素内の兄弟関係にあるすべての子要素のうち最後から数えてn番目がEだった時マッチ
E:nth-of-type(n) 直上の親要素内の兄弟関係にあるE要素のうち、n番目のE要素がマッチ
E:nth-last-of-type(n) 直上の親要素内の兄弟関係にあるE要素のうち、最後から数えてn番目にあるE要素がマッチ
E:first-of-type 直上の親要素内の兄弟関係にあるE要素で最初のもの
E:last-of-type 直上の親要素内の兄弟関係にあるE要素で最後のもの
E:empty 子要素を持たないE要素
E:target 参照URIの目標となっているE要素
E:enabled 有効になっている(:enabled)E要素
E:disabled 無効になっている(:disabled)E要素