Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 セレクタ「nth-of-type」

今回は、CSS3の「nth-of-type」について書きます。


「nth-of-type」は、ある要素のうち、n番目に来る要素を指定するときに使います。
実際にやったほうがはやいので、さっそくプログラムを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		div p:nth-of-type(3){
			color : red;
		}
	</style>
</head>
<body>
	<div>
		<h1>h1</h1>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<p>p</p>
		<h2>h2</h2>
		<p>p</p>
		<p>p</p>
		<p>p</p>
	</div>
</body>
</html>

実行結果
f:id:gupuru:20140406124152p:plain
p要素(<p>)の3番目が赤色に変わっています。

「nth-of-type」によって、p要素(<p>)の中で、3番目にくるものにスタイルをあてることが出来ました。

このような感じで「nth-of-type」を使います。


ここからは、もう少し詳しく「nth-of-type」について書きます。

E:nth-of-type(n) {プロパティ名:値;}

nの部分に数値を入れると、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。
上のプログラムの場合ですと、親要素(div)内で兄弟関係にあるE(p)要素でn(3)番目のものとなります。

nの部分ですが、数値以外も入れることができます。

  • 倍数
div p:nth-of-type(2n){
	color : red;
}

f:id:gupuru:20140406125236p:plain
「数値n」とすると、倍数になります。このコードですと2の倍数ということになります。

  • 奇数・偶数
div p:nth-of-type(odd){
	color : red;
}

f:id:gupuru:20140406125409p:plain
「odd」といれると奇数を指定できます。また、「even」といれると偶数を指定できます。



ここからは、「nth-of-type」と「nth-child」の違いについて書きます。
この2つは、よく似ています。(「nth-child」を知らない方は、コチラを見てください。)

「nth-child」は、親要素のn番目の子要素であるE要素を指定できます。
「nth-of-type」は、親要素内で兄弟関係にあるE要素でn番目のものを指定できます。

両者を実行結果から比べてみます。
「nth-child」

div p:nth-child(3){
	color : red;
}

f:id:gupuru:20140406130004p:plain
「nth-of-type」

div p:nth-of-type(3){
	color : red;
}

f:id:gupuru:20140406124152p:plain

2つとも3番目のp要素を赤色にするというものになっていますが、適応されたp要素が違います。
「nth-child」は、上から3番目のp要素で、「nth-of-type」は、p要素の中の3番目となっています。

これが、違いです。
まとめると・・・
「nth-child」は、親要素のn番目にある要素を指定できる。
「nth-of-type」は、親要素内で兄弟関係にある要素のうちのn番目のものを指定できる。

この辺は、実際にやったほうが分かりやすいと思います。

これで、終わります。


参考サイト
CSS3セレクタ「nth-child」と「nth-of-type」の使い方と違い|Webpark

広告を非表示にする