CSS3のセレクタ

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

属性の値がbarで始まる要素を対象にスタイルを適用します。
サンプルではhref属性の値が"http://"で始まる要素を赤字にしてます。

css
	#forward a[href^="http://"]{	color:#F00;	}	
	
html
	
	
ブラウザでの表示

«前のページに戻る


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

属性の値がbarで終わる要素を対象にスタイルを適用します。
サンプルではhref属性の値が"pdf"で終わる要素にはPDFアイコンを、 "doc"で終わる要素にはwordアイコンを表示してます。

css
#backward a[href$="pdf"]{
	padding:3px 0 3px 20px;
	background:url(pdf.gif) no-repeat;
}
#backward a[href$="doc"]{
	padding:3px 0 3px 20px;
	background:url(word.gif) no-repeat;
}
	
html
	
	
ブラウザでの表示

«前のページに戻る


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

属性の値がbarを含む要素を対象にスタイルを適用します。
サンプルではsrc属性の値が"chrome"を含む要素にボーダーを付けてます。

css
	#part img[src*="chrome"]{	border:1px #333 solid;	}
	
html
	
ブラウザでの表示

«前のページに戻る


E:root 疑似クラス

文書内のルートにあたる要素にスタイルを適用します。
サンプルでは(X)HTMLのルートであるhtml要素にグレーの背景色を指定してます。
htmlはbody要素の親にあたるのでbodyにmarginを指定する事でhtmlの背景を表示させてます。

css
	:root{	background-color:#E6E6E6;	}
	body{	margin:5px;	}
	

«前のページに戻る


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

隣接している子要素のn番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントします。
サンプルでは頭から数えて偶数番目のdd要素に赤を6番目のdd要素に紫を指定してます。

css
	#nthChild dd{	margin-left:10px;	}
	#nthChild dd:nth-child(2n){color:#F00;	}
	#nthChild dd:nth-child(6){	color:#90C;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


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

隣接している子要素の最後から数えてn番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントします。
サンプルでは最後から数えて奇数番目のdd要素に青を3番目のdd要素に紫を指定してます。

css
	#nthLastChild dd{	margin-left:10px;	}
	#nthLastChild dd:nth-last-child(odd){	color:#06C;	}
	#nthLastChild dd:nth-last-child(3){	color:#90C;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


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

子要素のn番目にあたる要素にスタイルを適用します。
子要素は隣接している必要がなく間に別の要素が有ってもその要素はカウントしません。
サンプルではdd要素を頭から数えて奇数番目のdd要素に赤を4番目のdd要素に紫を指定してます。

css
	#nthOfType dd{	margin-left:10px;	}
	#nthOfType dd:nth-of-type(2n+1){	color:#F00;	}
	#nthOfType dd:nth-of-type(4){	color:#90C;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


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

ある要素の同じ子要素の最後の要素にスタイルを適用します。
:nth-last-of-type()疑似クラスを使用して:nth-;ast-of-type(1)と書く事もできます。
サンプルでは最後のdd要素を赤にしています。

css
	#lastOfType dd:last-of-type{	color:#F00;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


E:last-child 疑似クラス

子要素の一番最後の要素にスタイルを適用します。
サンプルでは最後のdd要素を赤にしてます。

css
	#lastChild dd:last-child{	color:#F00;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


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

ある要素の同じ子要素の最初の要素にスタイルを適用します。
:nth-of-type()疑似クラスを使用して:nth-of-type(1)と書く事もできます。
サンプルでは最初のdd要素を赤にしています。

css
	#firstOfType dd:first-of-type{	color:#F00;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


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

子要素の最後から数えてn番目にあたる要素にスタイルを適用します。
子要素は隣接している必要がなく間に別の要素が有ってもその要素はカウントしません。
サンプルではdd要素を最後から数えて偶数番目のdd要素に赤を4番目のdd要素に紫を指定してます。

css
	#nthLastOfType dd{	margin-left:10px;	}
	#nthLastOfType dd:nth-last-of-type(2n){	color:#F00;	}
	#nthLastOfType dd:nth-last-of-type(4){	color:#90C;	}
	
html
	
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February
ブラウザでの表示
Spring
March
April
May
Summer
June
July
August
Autumun
September
October
November
Winter
December
January
February

«前のページに戻る


E:only-child 疑似クラス

ある要素内で子要素が唯一の場合にスタイルが適用されます。
サンプルではp要素の子要素がstrong要素だけの場合に赤になります。

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

日本の首都は東京です。

アメリカの首都はワシントンです。
フランスの首都はパリです。

中国の首都は北京です。
イギリスの首都はロンドンです。

ブラウザでの表示

日本の首都は東京です。

アメリカの首都はワシントンです。
フランスの首都はパリです。

中国の首都は北京です。
イギリスの首都はロンドンです。

«前のページに戻る


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

ある要素内で指定した要素が唯一の場合にスタイルが適用されます。
サンプルではp要素に子要素のstrong要素が1つだけの場合に赤が適用されます。

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

日本の首都は東京です。

アメリカの首都はワシントンです。
フランスの首都はパリです。

中国の首都は北京です。
イギリスの首都はロンドンです。

ブラウザでの表示

日本の首都は東京です。

アメリカの首都はワシントンです。
フランスの首都はパリです。

中国の首都は北京です。
イギリスの首都はロンドンです。

«前のページに戻る


E:empty 疑似クラス

要素内がテキストや空白など空の場合にスタイルが適用されます。
サンプルでは左下のセルが空白なので緑の背景が適応されます。

css
	#empty td{	border:1px #ccc solid;	}
	#empty td:empty{	background-color:#9C0;	}
	
html
	
td td
td
ブラウザでの表示
td td
td

«前のページに戻る


E:target 疑似クラス

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

css
	#target:target p{ font-weight:bold;	}
	
html
	

E:target 疑似クラスとは?

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

ブラウザでの表示

E:target 疑似クラスとは?

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

«前のページに戻る


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

ユーザーインターフェース要素が有効となっている場合にスタイルが適用されます。
サンプルでは有効なtextareaに緑の背景が適用されます。

css
	#enabled textarea:enabled{	background-color:#CF9;	}
	
html
	

ブラウザでの表示

«前のページに戻る


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

ユーザーインターフェース要素が無効となっている場合にスタイルが適用されます。
サンプルでは無効なtextareaにグレーの背景が適用されます。

css
	#disabled textarea:disabled{	background-color:#CCC;	}
	
html
	

ブラウザでの表示

«前のページに戻る


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

ラジオボタンやチェックボックスがチェックされた場合に適用されます。
サンプルではラジオボタンをチェックすると右マージンが10px適用されます。

css
	#checked:checked{	margin-right:10px;	}
	
html
	
ブラウザでの表示

«前のページに戻る


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

特定のセレクタ以外の要素にスタイルが適用されます。
サンプルではclass属性を持たないli要素に赤が適用されます。

css
	#not li:not([class]){	color:#F00;	}
	
html
	
  • りんご
  • トマト
  • 牛乳
  • バナナ
  • 鶏肉
  • レタス
ブラウザでの表示

«前のページに戻る


E ~ F 間接セレクタ

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

css
	#brother h2 ~ h3{	color:#F00;	}
	
html
	

大見出し

中見出し

日本の首都は東京です。

中見出し

アメリカの首都はワシントンです。

中見出し

イギリスの首都はロンドンです。

ブラウザでの表示

大見出し

中見出し

日本の首都は東京です。

中見出し

アメリカの首都はワシントンです。

中見出し

イギリスの首都はロンドンです。

«前のページに戻る