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

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

CSS3 セレクタ「nth-child」

CSS3

今回は、CSS3 のセレクタ「nth-child」について書きます。


「nth-child」を使うと、親要素の何番目かの子要素にスタイルをあてることができます。

実際にやったほうがはやいので、さっそくプログラムを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		div p:nth-child(2){
			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:20140331150712p:plain

このプログラムは、２番目の子要素を赤色に変えるようにしています。
実行結果をみると、２番目が赤色に変わっています。

具体的に「nth-child」について書きます。

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

nの部分に数値を入れると、その数値の子要素を指定できます。（２だったら、２番目の子要素、５なら５番目の子要素）

数値だけでなく、奇数を表す「odd」、偶数を表す「even」などの指定もできます。

evenを使った場合のプログラム↓

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
		div p:nth-child(even){
			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:20140331151343p:plain

あと、倍数もできます。その場合は、「2n」,「3n」など「数値n」の形で書きます。

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

「2n」だと２の倍数のものを指定します。


また、「*」とすると、「ｐ」、「ｈ１」など関係なく指定できます。

div *:nth-child(2n){
   color : red;
}

おまけですが・・・
「first-child」とすると、先頭の子要素を指定できます。

div *:first-child{
	color : red;
}

「last-child」とすると、一番最後の子要素を指定できます。

div *:last-child{
	color : red;
}

参考サイト
E:nth-child(n)−CSS3リファレンス