[CSS] nth-child 奇数/偶数行にCSSを適用

CSSの奇数/偶数/指定行にCSSを適用するサンプルです。nth-childを使用します。

目次

サンプル 奇数の行にCSSを適用 (nth-child)
  偶数の行にCSSを適用 (nth-child)
  指定した行にCSSを適用 (nth-child)
  指定した行にCSSを適用 (nth-of-type)
  後ろから数えてCSSを適用 (nth-last-child)
  中身が空の要素にCSSを適用する (empty)
  最初の1行目にCSSを適用(first-line)
  最初の1文字目にCSSを適用(first-letter)

奇数の行にCSSを適用 (nth-child)

セレクタ:nth-child(2n+1){
}
セレクタ:nth-child(odd){
}
  • nth-childは、表の行をしましま模様にできます。
  • nth-child(2n+1)とnth-child(odd)は、同じ親要素を持つ子要素の奇数の行にCSSを適用します。oddは奇数という意味です。
  • nth-child(3n+1)とすると2行おきにCSSを適用します。
<style>
table{width:50px;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

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

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

偶数の行にCSSを適用 (nth-child)

セレクタ:nth-child(2n){
}
セレクタ:nth-child(even){
}
  • nth-childは、表の行をしましま模様にできます。
  • nth-child(2n)とnth-child(even)は、同じ親要素を持つ子要素の偶数の行にCSSを適用します。evenは偶数という意味です。
  • nth-child(3n)とすると2行おきにCSSを適用します。
<style>
table{width:50px;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

tr:nth-child(2n)  {
/*  tr:nth-child(even)  { */
    background-color: yellow;
}
</style>
<body>
<table>
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

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

指定した行にCSSを適用 (nth-child)

セレクタ:nth-child ( 数値 ){
}

同じ親要素を持つ子要素の指定した数値の行にCSSを適用します。

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

tr:nth-child(3)  {
    background-color: yellow;
}
</style>
<body>
<table>
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

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

指定した行にCSSを適用 (nth-of-type)

セレクタ:nth-of-type ( 数値 ){
}

同じ親要素を持つ子要素でかつ同じタグの指定した数値の行にCSSを適用します。

<style>
  p:nth-of-type(2) {
    color: #ff0000;
  }
</style>
<body>
  <h2>見出し</h2>
  <p>aaa</p>
  <p>bbb</p>
  <p>ccc</p>
</body>

5行目は、nth-of-type(2)を指定しています。
8~10行目が対象になり、2番めの9行目の文字色が変わります。

※2行目が、p:nth-child(2)の場合

nth-childとした場合、<h2>も1つとしてカウントされるので注意が必要です。

後ろから数えてCSSを適用 (nth-last-child)

セレクタ:nth-last-child( 数値 ){
}

同じ親要素を持つ子要素の後ろから数えてCSSを適用します。

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

tr:nth-last-child(3)  {
    background-color: yellow;
}
</style>
<body>
<table>
	<tr><td>aaa</td></tr>
	<tr><td>bbb</td></tr>
	<tr><td>ccc</td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

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

中身が空の要素にCSSを適用する (empty)

セレクタ:empty{
}

中身が空の要素にCSSを適用します。

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

td:empty{
    height:30px;
	background-color:yellow;
}
</style>
<body>
<table>
	<tr><td>aaa</td></tr>
	<tr><td></td></tr>
	<tr><td><!-- コメント --></td></tr>
	<tr><td>ddd</td></tr>
</table>
</body>

5行目は、td:emptyを指定しています。
13行目は、中身が空のためCSSが適用されます。
14行目は、コメントですが、この場合もemptyのCSSが適用されます。

最初の1行目にCSSを適用(first-line)

セレクタ::first-line{
}

指定した要素の最初の1行目にCSSを適用します。

<style>
  .p1::first-line {
    color: red;
  }
</style>
<body>
  <p class="p1">
    テスト1-1<br />
    テスト1-2
  </p>
</body>

2行目は、::first-lineを指定しています。
8行目は、最初の1行目なので赤になります。

最初の1文字目にCSSを適用(first-letter)

セレクタ::first-letter{
}

指定した要素の最初の1文字目にCSSを適用します。

<style>
  .p1::first-letter {
    color: red;
  }
</style>
<body>
  <p class="p1">
    テスト1-1<br />
    テスト1-2
  </p>
</body>

2行目は、::first-letterを指定しています。
8行目は、最初の1文字目が赤になります。

関連の記事

CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
CSS 複数のセレクタを指定する/絞り込むサンプル
[CSS] ::beforeと::afterのサンプル

△上に戻る