【CSS】nth-child()で要素の指定

CSSの小技 その7
今回は「nth-child()で要素の指定」です。
今までのデモページで使用していましたが、nth-child()について
もう少し掘り下げていきたいと思います。

用途

テーブルやナビゲーションや横並びなどで、何番目かの要素に特定の装飾をしたいときに、
今までですとclassを加えて装飾していましたが、nth-child()を使うことで便利に、かつ綺麗なソースで構築する事が出来ます。

実装方法

今回は前回使ったナビゲーションで説明します。
ナビゲーションの順番によって要素の色を変更し、1番左の要素の横幅を半分にします。
ひとつ目の要素はfirst-childで指定することも出来ます。
CSSは下の方に記述しています。

HTML

<nav>
	<ul>
		<li><a href="#">HOME<span>ホーム</span></a></li>
		<li><a href="#">SERVICE<span>サービス</span></a></li>
		<li><a href="#">ABOUT US<span>企業概要</span></a></li>
		<li><a href="#">SHOP LIST<span>取扱店舗一覧</span></a></li>
		<li><a href="#">CONTACT US<span>お問い合わせ</span></a></li>
	</ul>
</nav>

CSS

nav {
	margin-top: 50px;
}

ul {
	margin: 0 auto;
	width: 90%;/* 横幅を%で指定 */
	text-align: center;
	display: flex;
	display: -webkit-flex;
}

ul li {
	font-size: 14px;
	flex: 2;/* 横幅の比率を指定 */
	-webkit-flex: 2;/* chrome、Safari用 */

}

ul li:first-child {
	flex: 1;/* HOMEの横幅は半分 */
	-webkit-flex: 1;/* chrome、Safari用 */
}

ul li a {
	display: block;
	padding: 1em;
}


ul li a {
	color: #FFFFFF;
	text-decoration: none;
}

ul li a:hover {
	background: #CCCCCC;
	color: #000000;
	text-decoration: underline;
}

ul li a span {
	display: block;
	font-size: 11px;
}

 /* nth-child()で順番ごとに指定 */

ul li:first-child {
	background: #999999;
}

ul li:nth-child(2) {
	background: #777777;
}

ul li:nth-child(3) {
	background: #555555;
}

ul li:nth-child(4) {
	background: #333333;
}

ul li:nth-child(5) {
	background: #111111;
}

奇数行、偶数行に指定する

テーブルで奇数行と偶数行で色を変えたりすることが良くあります。
行がたくさんある場合やプログラム等で動的に行数が増える場合に全て設定するのは大変です。
そこでnth-child()の括弧内をodd（奇数行）、even（偶数行）とし、それぞれ装飾することが出来ます。

HTML

<table>
	<tr>
		<th>商品名</th>
		<th>価格</th>
		<th>重さ</th>
	</tr>
	<tr>
		<th>りんご</th>
		<td>100円</td>
		<td>300g</td>
	</tr>
	<tr>
		<th>みかん</th>
		<td>50円</td>
		<td>100g</td>
	</tr>
	<tr>
		<th>梨</th>
		<td>80円</td>
		<td>350g</td>
	</tr>
	<tr>
		<th>グレープフルーツ</th>
		<td>150円</td>
		<td>380g</td>
	</tr>
	<tr>
		<th>キウイ</th>
		<td>100円</td>
		<td>120g</td>
	</tr>
	<tr>
		<th>パパイヤ</th>
		<td>300円</td>
		<td>250g</td>
	</tr>
	<tr>
		<th>マンゴー</th>
		<td>600円</td>
		<td>320g</td>
	</tr>
</table>

CSS

table {
	margin: 50px;
}

tr {

}

th {
	background: #333333;
	border: 1px #CCCCCC solid;
	color: #FFFFFF;
	font-size: 14px;
	width: 10em;
	padding: 1em;
}

td {
	border: 1px #CCCCCC solid;
	font-size: 14px;
	width: 10em;
	padding: 1em;
	text-align: right;
}


/* 奇数行、偶数行の設定 */

tr:nth-child(odd) {
	background: #999999;
}

tr:nth-child(even) {
	background: #EEEEEE;
}

他にも

3番目以降全てを指定する場合：nth-child(n+3)
3番目までを指定する場合：nth-child(-n+3)
1番目と3の倍数（3,6,9）を指定する場合：nth-child(3n+1)
最後の要素を指定する場合：nth-last-child(1)
最後からn番目の要素を指定する場合：nth-last-child(n)
とnと数字の組み合わせでいろいろと指定することが出来ます。
classを細く設定してソースが汚くなってしまうこと無くマークアップ出来るのは技術者としても気持ちが良いです。