CSS3のセレクタとjQueryの書き方

css3のセレクタをまとめてみました。
殆どのモダンブラウザがCSS3に対応してきましたが、
相変わらずIEの対応は遅れてます。

このことから現段階でCSS3を使用するのであれば、
適用されない状態でも閲覧は問題がない適度に抑えておくか、
jQueryを使用するのが最適かと思います。
なのでCSSでの書き方とjQueryを使った書き方、
両方を掲載しました。

1. CSS3セレクタ ブラウザ別対応表
2. E[foo^=”bar”]
3. E[foo$=”bar”]
4. E[foo*=”bar”]
5. E:root
6. E:nth-child(n)
7. E:nth-last-child(n)
8. E:nth-of-type(n)
9. E:nth-last-of-type(n)
10. E:last-child
11. E:first-of-type
12. E:last-of-type
13. E:only-child
14. E:only-of-type
15. E:empty
16. E:target
17. E:enabled
18. E:disabled
19. E:checked
20. E:not(s)
21. E ~ F

CSS3セレクタ ブラウザ別対応表

ブラウザバージョン	3.0	4.0	4.0	5.0	10.5	9.0	6	7	8
E[foo^=”bar”]	○	○	○	○	○	○	×	×	○
E[foo$=”bar”]	○	○	○	○	○	○	×	×	○
E[foo*=”bar”]	○	○	○	○	○	○	×	×	○
E:root	○	○	○	○	○	○	×	×	×
E:nth-child(n)	×	○	○	○	○	○	×	×	×
E:nth-last-child(n)	×	○	○	○	○	○	×	×	×
E:nth-of-type(n)	×	○	○	○	○	○	×	×	×
E:nth-last-of-type(n)	×	○	○	○	○	○	×	×	×
E:last-child	○	○	○	○	○	○	×	×	×
E:first-of-type	×	○	○	○	○	○	×	×	×
E:last-of-type	×	○	○	○	○	○	×	×	×
E:only-child	○	○	○	○	○	○	×	×	×
E:only-of-type	○	○	○	○	○	○	×	×	×
E:empty	×	○	○	○	○	○	×	×	×
E:target	○	○	○	○	○	○	×	×	×
E:enabled	○	○	○	○	○	○	×	×	×
E:disabled	○	○	○	○	○	○	×	×	×
E:checked	○	○	○	○	○	○	×	×	×
E:not(s)	○	○	○	○	○	○	×	×	×
E ~ F	○	○	○	○	○	○	×	○	○

E[foo^="bar"] 属性セレクタ

要素名[属性名^="属性値"] 形式の属性セレクタ。
属性の値がbarで始まる要素を対象にスタイルを適用します。

					a[href^="http://"]{    color:#F00; } 
					

jQuery

					$(function(){
						$("a[href^='http://']").css("color","red");
					});
					

E[foo$="bar"] 属性セレクタ

 要素名[属性名$="属性値"] 形式の属性セレクタ。
属性の値がbarで終わっている要素を対象にスタイルを適用します。

					a[href$="pdf"]{
						background:url(pdf.gif) no-repeat;
					}
					

jQuery

					$(function(){
						$("a[href$='pdf']").css({
							background:"url(pdf.gif)",
							backgroundRepeat:"no-repeat",
							padding:"3px 0 3px 20px"});
					});
					

E[foo*="bar"] 属性セレクタ

要素名[属性名*="属性値"] 形式の属性セレクタ。
属性の値にbarを含む要素を対象にスタイルを適用します。

					img[src*="../../"]{   border:1px #333 solid;  }
					

jQuery

					$(function(){
						$("img[src*='../../']").css("border","1px #333 solid");
					});
					

E:root 疑似クラス

文書内のルートにあたる要素にスタイルを適用します。
(X)HTMLの場合はhtml要素が該当します。

					:root{    margin:0; }
					

jQuery

					$(function(){
						$(":root").css("margin","0");
					});
					

E:nth-child(n) 疑似クラス

隣接している子要素のn番目にあたる要素にスタイルを適用します。
対象になる要素同士が隣接している必要があります。
また、"n"の部分に"even"、"2n"と記述すると偶数番目の要素に、
"odd"、"2n-1"と記述すると奇数番目の要素を指定する事ができます。

					dd:nth-child(2n){color:#F00;  }
					

jQuery

					$(function(){
						$("dd:nth-child(2n)").css("color","#F00");
					});
					

E:nth-last-child(n)  疑似クラス

隣接している子要素の最後から数えてn番目にあたる要素にスタイルを適用します。
対象になる要素同士が隣接している必要があります。
また、"n"の部分に"even"、"2n"と記述すると偶数番目の要素に、
"odd"、"2n-1"と記述すると奇数番目の要素を指定する事ができます。

					dd:nth-last-child(3){ color:#90C; }
					

jQuery

					$(function(){
						$("dd:nth-last-child(3)").css("color","#90C");
					});
					

E:nth-of-type(n)  疑似クラス

ある要素のn番目に当たる子要素にスタイルを適用します。
要素同士が隣接ではなく間接していても適用されます。

					dd:nth-of-type(2n+1){    color:#F00; }
					

jQuery

					$(function(){
						$("dd:nth-of-type(2n+1)").css("color","#F00");
					});
					

E:nth-last-of-type(n) 疑似クラス

ある要素の最後から数えてn番目に当たる子要素にスタイルを適用します。
要素同士が隣接ではなく間接していても適用されます。

					dd:nth-last-of-type(even){ color:#F00; }
					

jQuery

					$(function(){
						$("dd:nth-last-of-type(even)").css("color","#F00");
					});
					

E:last-child 疑似クラス

最後の子要素にスタイルを適用します。
また、最初の子要素にスタイルを適用する:first-child疑似クラスはCSS2で定義されてます。

					dd:last-child{   color:#F00; }
					

jQuery

					$(function(){
						$("dd:last-child").css("color","#F00");
					});
					

E:first-of-type 疑似クラス

ある要素の最初の子要素にスタイルを適用します。
E:nth-of-type(n)疑似クラスを使用して:nth-of-type(1)と書き換えることもできます。

					dd:first-of-type{   color:#F00; }
					

jQuery

					$(function(){
						$("dd:first-of-type").css("color","#F00");
					});
					

E:last-of-type 疑似クラス

ある要素の最後の子要素にスタイルを適用します。
E:nth-last-of-type(n)疑似クラスを使用して:nth-last-of-type(1)と書き換えることもできます。

					dd:last-of-type{   color:#F00; }
					

jQuery

					$(function(){
						$("dd:last-of-type").css("color","#F00");
					});
					

E:only-child 疑似クラス

ある要素内で子要素が唯一の場合にスタイルが適用されます。
E:only-child疑似クラスでは同一要素内に他の要素があると適用されません。

					p strong:only-child{ color:#F00; }
					

jQuery

					$(function(){
						$("p strong:only-child").css("color","#F00");
					});
					

E:only-of-type 疑似クラス

ある要素内で指定した要素が唯一の場合にスタイルが適用されます。
E:only-of-type疑似クラスでは同一要素内に他の要素があっても指定した要素が唯一であれば適用されます。

					p strong:only-of-type{  color:#F00; }
					

jQuery

					$(function(){
						$("p strong:only-of-type").css("color","#F00");
					});
					

E:empty 疑似クラス

要素内がテキストや空白など空の場合にスタイルが適用されます。

					td:empty{   background-color:#C00; }
					

jQuery

					$(function(){
						$("td:empty").css("backgroundColor","#9C0");
					});
					

E:target 疑似クラス

アンカーリンクで飛んだ先の要素にスタイルが適用されます。

					:target{   color:#C00; }
					

jQuery

					$(function(){
						if(document.querySelectorAll){
							$("a[href='#target']").click(function(){
								location.href = this.href;
								$("#target:target").css("color","#C00");
							});
						};
					});
					

E:enabled UI要素状態擬似クラス

ユーザーインターフェース要素が有効となっている場合にスタイルが適用されます。

					textarea:enabled{   background-color:#C00; }
					

jQuery

					$(function(){
						$("textarea:enabled").css("backgroundColor","#CF9");
					});
					

E:disabled UI要素状態擬似クラス

ユーザーインターフェース要素が無効となっている場合にスタイルが適用されます。

					textarea:disabled{   background-color:#C00; }

jQuery

					$(function(){
						$("textarea:disabled").css("backgroundColor","#CCC");
					});
					

E:checked UI要素状態擬似クラス

ラジオボタンやチェックボックスがチェックされた場合に適用されるセレクタです。

					input[type="checkbox"]:checked{   margin-right:10px; }
					

jQuery

					$(function(){
						$("#check").click(function(){
							$("#check").css("marginRight","0");
							$("#check:checked").css("marginRight","10px");
						});
					});
					

E:not(s) 否定擬似クラス

特定のセレクタ以外の要素にスタイルが適用されます。

					li:not([class]){   color:#F00; }
					

jQuery

					$(function(){
						$("li:not([class])").css("color","#F00");
					});
					

E ~ F 間接セレクタ

親要素が同じになる兄弟関係の弟にスタイルが適用されます。
E + F 隣接セレクタが直後の弟に適応されるのに対して、
間接セレクタは兄弟関係に有れば、間に別の要素が入っても適用されます。

					h2 ~ h3{   font-size:20px; }
					

jQuery

					$(function(){
						$("h2 ~ h3").css("color","#F00");
					});