テーブルのセルごとにスタイルを適用する

特定のセルのみにスタイルを適用する

CSSで用意されている擬似クラスを使うと、テーブルにある特定のセルだけにピンポイントでスタイルを適用することができます。

3行目の「BBQ大会」を赤文字に、7行目の全セルを薄い文字色にしています。

コード例

<style>
table tr:nth-child(3) td:nth-child(2) {
	color: #96001c;
	background-color: #ffcfd8;
}
table tr:nth-child(7) td {
	color: #bbb;
}
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会 (応募受付終了)</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

CSSに記述したセレクタ「tr:nth-child(3) td:nth-child(2)」について、「tr:nth-child(3)」は3つ目のtr要素を指しています。
さらに「td:nth-child(2)」の部分で、2つ目のtd要素を指定することで、3行目の2つ目のtd要素に対してcolorプロパティとbackground-colorプロパティを適用するセレクタとなっています。

その後のセレクタ「tr:nth-child(7) td」では、「tr:nth-child(7)」の部分で7つ目のtr要素を指し、続く「td」でtr要素の子孫要素にあたる全てのtd要素を指定しています。
結果として、7行目の全てのtd要素に対してcolorプロパティを適用しています。

特定の列にスタイルを適用する

続いて、行ではなく列の単位でスタイルを適用していきます。
列単位についても擬似クラスを使えば簡単に指定することができます。

コード例

<style>
table td:nth-child(2) {
	color: #e72053;
	font-weight: bold;
}
</style>
<table>
	<tr>
		<th>ID</th>
		<th>イベント名</th>
		<th>定員</th>
		<th>開催日</th>
	</tr>
	<tr>
		<td>E080125</td>
		<td>Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月20日</td>
	</tr>
	<tr>
		<td>E080126</td>
		<td>BBQ大会</td>
		<td>40名</td>
		<td>18年8月23日</td>
	</tr>
	<tr>
		<td>E080127</td>
		<td>読書会</td>
		<td>20名</td>
		<td>18年8月25日</td>
	</tr>
	<tr>
		<td>E080128</td>
		<td>プラネタリウム鑑賞会</td>
		<td>15名</td>
		<td>18年8月28日</td>
	</tr>
	<tr>
		<td>E080129</td>
		<td>第2回 Netflix鑑賞会</td>
		<td>10名</td>
		<td>18年8月30日</td>
	</tr>
	<tr>
		<td>E090130</td>
		<td>花火大会 (応募受付終了)</td>
		<td>20名</td>
		<td>18年9月7日</td>
	</tr>
</table>

CSSに記述したセレクタ「td:nth-child(2)」は全ての行の中にある、2つの子孫要素であるtd要素を指定し、スタイルを適用しています。
1行目の「イベント名」はth要素なのでスタイルは適用されません。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。