CSS 疑似クラスのサンプル2(n番目にCSSを適用等)

CSSの疑似クラスのサンプルです。
n番目にCSSを適用する等の擬似クラスをまとめています。

目次

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

: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

コード

4行目は、nth-child(2n+1)を指定しています。
10~13行目の行の奇数の行の背景色が変わります。

<style>
table{width:100%;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}
#t1 tr:nth-child(2n+1)  {
    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

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

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

コード

4行目は、nth-child(2n)を指定しています。
10~13行目の行の偶数の行の背景色が変わります。

<style>
table{width:100%;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}
#t2 tr:nth-child(2n)  {
    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

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

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

コード

4行目は、nth-child(3)を指定しています。
10~13行目の行の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

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

:nth-last-child( 数値 )

コード

4行目は、nth-last-child(3)を指定しています。
10~13行目の行の後ろから数えて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

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

要素 :empty

コード

4行目は、td:emptyを指定しています。
12行目は、中身が空のため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行目の高さが広がり背景色が変わります。

aaa
ccc
ddd

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

要素 :not()

コード

4行目は、:notを指定しています。
12行目は、クラスが一致しないため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 疑似クラスのサンプル1
CSS 疑似要素のサンプル




△上に戻る