CSSセレクタ


/*===============================================================
 ■ 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要素

TOP