CSS2のセレクタ

:focus疑似クラス

css
	#focus input:focus{	background-color:#FF9;	}	
	
html
	
お名前
メール
ご意見

ブラウザでの表示
お名前
メール

«前のページに戻る


:lang疑似クラス

css
	#lang p:lang(en){	color:#C00;	}
	#lang p:lang(fr){	color:#009;	}
	
html
	

今月は2月です

This month is February.

ブラウザでの表示

今月は2月です

This month is February.

C'est février ce mois.

«前のページに戻る


:first-child疑似クラス

css
	#firstChild ul li:first-child{	color:#C00;	}
	
html
	
  • りんご
  • いちご
  • みかん
  • ぶどう
ブラウザでの表示

«前のページに戻る


:first-line疑似クラス

css
	#firstLine p:first-line{	color:#C00;	}
	
html
	

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

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

イタリアの首都はローマです。

ブラウザでの表示

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

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

イタリアの首都はローマです。

«前のページに戻る


:first-letter疑似クラス

css
	#firstLetter p:first-letter{
	font-size:20px;
	color:#C00;
	font-weight:bold;
	}
	
html
	

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

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

ブラウザでの表示

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

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

«前のページに戻る


:before疑似クラス

css
	#before blockquote:before{
	content:url("blockquote.gif");
	}
	#before p:before{
		content:"『";
	}
	
html
	
首都(しゅと)とは、一国の中心となる都市のことを指す。 ほとんどの場合にはその国の中央政府が所在し、国家元首等の国の最高指導者が拠点とする都市のことである。

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

ブラウザでの表示
首都(しゅと)とは、一国の中心となる都市のことを指す。 ほとんどの場合にはその国の中央政府が所在し、国家元首等の国の最高指導者が拠点とする都市のことである。

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

«前のページに戻る


:after疑似クラス

css
	#after blockquote:after{
	content:url("blockquote.gif");
	}
	#after p:after{
		content:"』";
	}
	
html
	
首都(しゅと)とは、一国の中心となる都市のことを指す。 ほとんどの場合にはその国の中央政府が所在し、国家元首等の国の最高指導者が拠点とする都市のことである。

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

ブラウザでの表示
首都(しゅと)とは、一国の中心となる都市のことを指す。 ほとんどの場合にはその国の中央政府が所在し、国家元首等の国の最高指導者が拠点とする都市のことである。

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

«前のページに戻る


E[attribute]

css
	#attr1 a[title]{
	font-style:italic;
	}
	
html
	
	
ブラウザでの表示

«前のページに戻る


E[attribute="value"]

css
	#attr2 a[target="_blank"]{
	font-style:italic;
	}
	
html
	
	
ブラウザでの表示

«前のページに戻る


E[attribute~="value"]

css
	#attr3 strong[class~="blue"]{
	color:#009;
	}
	#attr3 strong[class~="italic"]{
		font-style:italic;
	}
	/*要素名[属性名="属性値"]*/
	#attr3 strong[class="green"]{
		color:#69b200;
	}
	
html
	

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

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

ブラウザでの表示

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

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

«前のページに戻る


子セレクタ

css
	#child p>strong{	color:#C00;	}
	
html
	

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

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

ブラウザでの表示

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

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

«前のページに戻る


隣接セレクタ

css
	#next h3 + p{	color:#C00;	}
	
html
	
	
ブラウザでの表示

«前のページに戻る