CSS 奇数/偶数行(nth-child)と適用しない(not)

CSSの奇数/偶数/指定行(nth-child)と適用しない(not)のサンプルです。

目次

サンプル 奇数の行に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を適用しない (not)

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

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

tr:nth-child(2n+1)  {
/* #t1 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を適用します。
  • nth-child(3n)とすると2行おきにCSSを適用します。
  • evenは偶数という意味です。
<style>
table{width:50px;border:1px solid #000000;border-collapse:collapse;}
td{border:1px solid #000000;}

tr:nth-child(2n)  {
/* #t2 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を適用します。
  • 疑似要素です。CSS3では::first-lineとコロンを2つ記述します。CSS2では:first-lineのようにコロン1つでした。
<style>
.p1::first-line {
	color:red;
}
</style>
<body >
	<p class="p1">テスト1-1<br>
	テスト1-2</p>

	<p>テスト1-3<br>
	テスト1-4</p>

	<p class="p1">テスト1-5<br>
	テスト1-6</p>
</body>

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

以下のイメージになります。

テスト1-1
テスト1-2

テスト1-3
テスト1-4

テスト1-5
テスト1-6

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

セレクタ::first-letter{
}
  • 指定した要素の最初の1文字目にCSSを適用します。
  • 疑似要素です。CSS3では::first-letterとコロンを2つ記述します。CSS2では:first-letterのようにコロン1つでした。
<style>
.t21::first-letter {
	color:red;
}
</style>
<body >

	<p class="t21">テスト1-1<br>
	テスト1-2</p>

	<p>テスト1-3<br>
	テスト1-4</p>

	<p class="t21">テスト1-5<br>
	テスト1-6</p>

</body>

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

以下のイメージになります。

テスト1-1
テスト1-2

テスト1-3
テスト1-4

テスト1-5
テスト1-6

特定の要素だけCSSを適用しない (not)

セレクタ:not(適用しないセレクタ){
}
セレクタ:not(適用しないセレクタ):not(適用しないセレクタ){
}
  • 特定の要素だけCSSを適用しない場合に使用します。
  • 複数を否定する場合は、:not()を続けます。
<style>
  /* p:not(.p2) { */
  p:not(.p2):not(.p3) {
    color: red;
  }
</style>
<body>
  <p class="p1">aaa</p>
  <p class="p2">bbb</p>
  <p class="p3">ccc</p>
  <p class="p4">ddd</p>
</body>

3行目は、p2とp3クラスに対して:notを指定しています。
8,11行目は、4行目のCSSが適用され色が変わります。
9,10行目は、3行目のnotで除外されているので色は変わりません。

以下のイメージになります。

以下はMDNの:not()のリンクです。 
https://developer.mozilla.org/ja/docs/Web/CSS/:not

関連の記事

CSSの書き方/コメントとセレクタの一覧
CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
CSS 複数のセレクタを指定する/絞り込むサンプル
CSS 属性セレクタのサンプル(要素名[属性名="値"])
CSS 疑似要素の::beforeと::afterのサンプル

△上に戻る