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

css3のセレクタをまとめてみました。 殆どのモダンブラウザがCSS3に対応してきましたが、 相変わらずIEの対応は遅れてます。 このことから現段階でCSS3を使用するのであれば、 適用されない状態でも閲覧は問題がない適 […]

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セレクタ ブラウザ別対応表

  firefox safari opera chrome ie
ブラウザバージョン 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; } 
					

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

E:root 疑似クラス

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

					:root{    margin:0; }
					

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

E:last-child 疑似クラス

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

E:only-child 疑似クラス

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

E:empty 疑似クラス

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

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

DEMO

jQuery

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

DEMO

E:target 疑似クラス

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

					:target{   color:#C00; }
					

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

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

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

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

DEMO

jQuery

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

DEMO

E ~ F 間接セレクタ

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

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

DEMO

jQuery

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

DEMO

Add Comment

本文

  1. [...] Design Spice:CSS3のセレクタとjQueryの書き方 [...]

PAGE TOP