【HTML・CSS】疑似クラス「:first-child」を使って特定の列に背景色を設定する方法

2019年5月19日

今回は疑似セレクタの1つである「:first-child」を使って、表に背景色を設定する方法です。

この「:first-child」は、ある要素で囲まれている子要素の内、初めに表れる要素についてスタイルを適用する際に使います。

以下は当サイトのお問い合わせ欄ですが、「:first-child」を使って、最初の列に背景色を設定しています。

今回は上の画像のように特定箇所に背景色を設定することをゴールに進めます。

:first-childは同じ要素が並列している際に有効

:first-childは同じ要素が並列して記述されている際に有効です。
よく例でみるのは<li>要素の最初の文字色を変えるとかですね。

<ul>
 <li>…</li> /*最初の要素のみ適用したい*/
 <li>…</li>
 <li>…</li>
</ul>

今回の例では、表（<table>…</table>）を例に進めます。
初期状態は以下の画像のような形です。

初期状態のHTMLとCSSでの記述は以下の通りです。

<table>
<tr>
	<td>1-1</td>
	<td>1-2</td>
	<td>1-3</td>
</tr>
<tr>
	<td>2-1</td>
	<td>2-2</td>
	<td>2-3</td>
</tr>
<tr>
	<td>3-1</td>
	<td>3-2</td>
	<td>3-3</td>
</tr>

td {
     border: solid 1px;
}
table {
     border-collapse: collapse;
}

ここからCSSを追記して以下の状態までもっていきます。

table tr td:first-child{
     background-colr:#f0fff0;
}

以上の追記で設定できます。

特定の列に設定したい場合

今回は、最初の要素に限定して、:first-childを使いました。

特定の列などに設定したい場合は、:nth-child()や:nth-last-childを使います。
()内に記述することで設定できます。（数列みたいなイメージ）

奇数列に設定

nth-child(2n+1)

偶数列に設定

nth-child(2n)

3n番目の列に設定

nth-child(3n)

最初から数えて3番目までの列

nth-child(-n+3)

最後から数えて3番目までの列

nth-last-child(-n+3)

終わりに

慣れると便利な:first-childやnth-child()の紹介でした。

※テーブルタグの生成にあたりこちらのサイトを利用させていただきました。