CSS 疑似クラスのサンプル(:nth-child/:nth-last-child/:empty/:not)

nas

CSSの疑似クラスのサンプルです。
:nth-childは、表の行をしましま模様にすることができます。

目次

１．奇数の行にスタイルを適用 (:nth-child(2n+1)/:nth-child(odd))

:nth-child(2n+1)
:nth-child(odd)
  • nth-child(2n+1)とnth-child(odd)は、同じ親要素を持つ子要素の奇数の行にスタイルを適用します。
  • nth-child(3n+1)とすると2行おきにスタイルを適用します。
  • 以下はMDNの:nth-child()のリンクです。 
    https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

コード

5行目は、nth-child(2n+1)を指定しています。
12～15行目の行の奇数の行の背景色が変わります。
6行目のコメントを外して5行目をコメントにしても同じ結果になります。

<style>
table{width:100%;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

#t1 tr:nth-child(2n+1)  {
/* #t1 tr:nth-child(odd)  { */
    background-color: Lavender;
}
</style>
<body>
<table id="t1">
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。奇数行に背景色がついています。

aaa
bbb
ccc
ddd

 

２．偶数の行にスタイルを適用 (:nth-child(2n)/:nth-child(even))

:nth-child(2n)
:nth-child(even)
  • nth-child(2n)とnth-child(even)は、同じ親要素を持つ子要素の偶数の行にスタイルを適用します。
  • nth-child(3n)とすると2行おきにスタイルを適用します。

コード

5行目は、nth-child(2n)を指定しています。
12～15行目の行の偶数の行の背景色が変わります。
6行目のコメントを外して5行目をコメントにしても同じ結果になります。

<style>
table{width:100%;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

#t2 tr:nth-child(2n)  {
/* #t2 tr:nth-child(even)  { */
    background-color: Lavender;
}
</style>
<body>
<table id="t2">
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。偶数行に背景色がついています。

aaa
bbb
ccc
ddd

 

３．指定した行にスタイルを適用 (:nth-child (数値))

:nth-child ( 数値 )
  • 同じ親要素を持つ子要素の指定した数値の行にスタイルを適用します。

コード

5行目は、nth-child(3)を指定しています。
11～14行目の行の3行目の背景色が変わります。

<style>
table{width:100%;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

#t3 tr:nth-child(3)  {
    background-color: Lavender;
}
</style>
<body>
<table id="t3">
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。3行目に背景色がついています。

aaa
bbb
ccc
ddd

 

４．後ろから数えてスタイルを適用 (:nth-last-child(数値))

:nth-last-child( 数値 )

コード

5行目は、nth-last-child(3)を指定しています。
11～14行目の行の後ろから数えて3行目(上から数えると2行目)の背景色が変わります。

<style>
table{width:100%;border:1px solid #000000;border-collapse: collapse;}
td{border:1px solid #000000;}

#t4 tr:nth-last-child(3)  {
    background-color: Lavender;
}
</style>
<body>
<table id="t4">
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。後ろから数えて3行目(上から数えると2行目)に背景色がついています。

aaa
bbb
ccc
ddd

 

５．中身が空の要素にスタイルを適用 (empty)

要素 :empty

コード

5行目は、td:emptyを指定しています。
13行目は、中身が空のためCSSが適用されます。

<style>
table{width:100%;border:1px solid #000000;border-collapse: collapse;}
td{border:1px solid #000000;}

#t5 td:empty  {
    height:60px;
	background-color:Lavender;
}
</style>
<body>
<table id="t5">
	<tr><td>aaa</td></tr>
	<tr><td></td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。2行目の高さが広がり背景色が変わります。

 

６．一致しない要素にスタイルを適用 (:not())

要素 :not()

コード

5行目は、:notを指定しています。
13行目は、クラスが一致しないためCSSが適用されます。

<style>
table{width:100%;border:1px solid #000000;border-collapse: collapse;}
td{border:1px solid #000000;}

#t6 td:not(.td1)  {
    height:60px;
	background-color:Lavender;
}
</style>
<body>
<table id="t6">
	<tr><td class="td1">aaa</td></tr>
	<tr><td class="td2">bbb</td></tr>
	<tr><td class="td1">ccc</td></tr>
	<tr><td class="td1">ddd</td></tr>
</table>
</body>

サンプル

上記コードのサンプルです。2行目の高さが広がり背景色が変わります。

aaa
bbb
ccc
ddd

関連の記事

CSSの書き方とセレクタの一覧
CSS 子孫セレクタ/子セレクタ/隣接セレクタ/一般兄弟セレクタのサンプル
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似クラスのサンプル(:link/:visited/:hover/:active/:focus/:target/:lang/:enabled/:disabled/:checked)
CSS 疑似要素のサンプル(::first-line/::first-letter/::before/::after)

△上に戻る