E:nth-child(n) 疑似クラス《前からn番目、一定間隔おきに指定》-CSS-

nth-childの指定

nth-child疑似クラスは「n番目または一定間隔おきの要素にスタイルを適用」する場合に使用します。

エヌティエイチ チャイルド

:nth-child()

前から任意の位置、間隔おきの要素を指定する

nth-childを使うと前から任意の位置または一定間隔の要素を指定することができます。

nth-childは単独指定、一定間隔おきに指定可能です。1行おきに背景色を変えたい場合など、対象要素に毎回クラス名を記述する必要がなくなりソースがスッキリします。

nth-child記述例

値(an+b)は親要素からみて適用したい子要素が何番目にあたるのかを指定します。

a、b:整数(0,1,-1,2,-2・・・・・)
n:1から始まる正の整数(1,2・・・・・)と0で何番目かを指定

値には数字以外にも指定することができます。(下記表)

数値(2) 2番目の子要素がE要素の場合適用。
数値(2n) 2の倍数(偶数)の子要素がE要素の場合適用。
2以外にも3・・・などを指定した場合は「3の倍数」となります。
2n(偶数)を指定する場合は「even」でも可能です。
数値(2n+1) 2の倍数(偶数)に1を足した(奇数)子要素がE要素の場合適用。
2n+1(奇数)を指定する場合は「odd」でも可能です。
数値(n+5) 5番目以降の子要素がE要素の場合適用。
数値(-n+5) 5番目以前の子要素がE要素の場合適用。
数値(5n+1) 5の倍数に1を足した子要素がE要素の場合適用。
even 偶数の子要素がE要素の場合適用。
odd 奇数の子要素がE要素の場合適用。

各値別サンプルも用意しましたので、値指定の参考にしてください。【値別サンプル】

nth-childは子要素内に指定した要素以外もカウントしてしまいますが、指定した要素のみをカウントさせたい場合はnth-of-typeを使用します。

nth-childは前から何番目ですが、後ろから指定したい場合はnth-last-childを使用します。

適用する要素は勘違いしやすい

慣れていないうちは思った通りに適用されない場合があります。
基本的にはnth-childの解釈の勘違いが多いです。

nth-child適用の解釈

  1. <li>に適用させる。
  2. 値:2n(偶数)の子要素に適用させる。
  3. HTMLソースでは、<li>の親要素は<ul>なので<ul>内の子要素が適用される範囲となります。
  4. <ul>が対象の親要素で、その子要素でかつ偶数のli要素がCSSの適用対象となります。li要素が対象なので、同じ親要素内の4番目(偶数)にある<p>タグは除外されます。

MEMO

「li:nth-child(2n)とした場合」及び「サンプル(入れ子の場合) 」の説明で指定順を分かりやすくするため<p>タグを<li>に内包していません。

リストの入れ子の場合、<p>タグなどは<li>に内包しなければ、ルール違反となりますので注意してください。

<li><p>テキスト内容</p></li> が正しい記述になります。

サンプル(基本)

【表示例】

  • サンプルリスト1
  • サンプルリスト2
  • サンプルリスト3
  • サンプルリスト4

【HTML】

<ul>
  <li>サンプルリスト1</li>
  <li>サンプルリスト2</li>
  <li>サンプルリスト3</li>
  <li>サンプルリスト4</li>
</ul>

【CSS】

li:nth-child(2n) {
  color: #FF7BAC;
}

サンプル(入れ子の場合)

【表示例】

  • サンプルリスト親1
  • サンプルpタブ親

  • サンプルリスト親2
  • サンプルリスト親3
  • サンプルリスト親4
  • サンプルリスト親5
  • サンプルリスト親6
    • サンプルリスト子61
    • サンプルリスト子62
    • サンプルリスト子63
    • サンプルリスト子64
    • サンプルリスト子65
  • サンプルリスト親7
  • サンプルリスト親8
  • サンプルリスト親9

【HTML】

<ul>
<li>サンプルリスト親1</li>
<p>サンプルpタブ親</p>
<li>サンプルリスト親2</li>
<li>サンプルリスト親3</li>
<li>サンプルリスト親4</li>
<li>サンプルリスト親5</li>
<li>サンプルリスト親6
	<ul>
	<li>サンプルリスト子61</li>
	<li>サンプルリスト子62</li>
	<li>サンプルリスト子63</li>
	<li>サンプルリスト子64</li>
	<li>サンプルリスト子65</li>
	</ul>
</li>
<li>サンプルリスト親7</li>
<li>サンプルリスト親8</li>
<li>サンプルリスト親9</li>
</ul>

【CSS】

li:nth-child(2n) {
  color: #FF7BAC;
}

「サンプルpタブ親」「サンプルリスト親6、サンプルリスト子61」のカラーが変更されていないのは、「liから見た親要素内の子要素を前から数えて偶数に適用する」ため奇数のリスト、リスト以外の要素には適用されません。

ただし、子要素のn番目のカウントには含まれますので「サンプルpタブ親」がカウントされ、後の「サンプルリスト親3」(リスト要素としては3番目)にCSSが適用されます。

値別サンプル

値別サンプルのHTMLは<ul>に<li>のリスト項目を1~15までのソースで統一しています。

nth-child(2)

2番目の子要素がE要素の場合適用。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(2) {
  color: #FF7BAC;
}

nth-child(2n)

2の倍数の子要素がE要素の場合適用。
2以外にも3・・・などを指定した場合は「3の倍数」となります。
2n(偶数)を指定する場合は「even」でも可能です。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(2n) {
  color: #FF7BAC;
}
  • n=0の場合:2×0=0(0番目は存在しない)
  • n=1の場合:2×1=2(2番目に適用)
  • n=2の場合:2×2=4(4番目に適用)・・・・・
  • ( )内のように偶数が指定される。

nth-child(2n+1)

2の倍数に1を足したの子要素がE要素の場合適用。
2n+1(奇数)を指定する場合は「odd」でも可能です。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(2n+1) {
  color: #FF7BAC;
}
  • n=0の場合:2×0+1=1(1番目に適用)
  • n=1の場合:2×1+1=3(3番目に適用)
  • n=2の場合:2×2+1=5(5番目に適用)・・・・・
  • ( )内のように奇数が指定される。

nth-child(n+5)

5番目以降の子要素がE要素の場合適用。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(n+5) {
  color: #FF7BAC;
}
  • n=0の場合:0+5=5(5番目に適用)
  • n=1の場合:1+5=6(6番目に適用)
  • n=2の場合:2+5=7(7番目に適用)・・・・・
  • nが増加するごとに数値が増加する。

nth-child(-n+5)

5番目以前の子要素がE要素の場合適用。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(-n+5) {
  color: #FF7BAC;
}
  • n=0の場合:-0+5=5(5番目に適用)
  • n=1の場合:-1+5=4(4番目に適用)
  • n=2の場合:-2+5=3(3番目に適用)・・・・・
  • nが増加するごとに数値が減少する。

nth-child(5n+1)

5の倍数に1を足した子要素がE要素の場合適用。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(5n+1) {
  color: #FF7BAC;
}
  • n=0の場合:5×0+1=5(1番目に適用)
  • n=1の場合:5×1+1=6(6番目に適用)
  • n=2の場合:5×2+1=11(11番目に適用)・・・・・

nth-child(even)

偶数の子要素がE要素の場合適用。偶数を指定する場合は「2n」でも可能です。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(even) {
  color: #FF7BAC;
}
  • n=0の場合:2×0=0(0番目は存在しない)
  • n=1の場合:2×1=2(偶数なので適用)
  • n=2の場合:2×2=4(偶数なので適用)・・・・・

nth-child(odd)

奇数の子要素がE要素の場合適用。奇数を指定する場合は「2n+1」でも可能です。

サンプル

【表示例】

  • テストリスト1
  • テストリスト2
  • テストリスト3
  • テストリスト4
  • テストリスト5
  • テストリスト6
  • テストリスト7
  • テストリスト8
  • テストリスト9
  • テストリスト10
  • テストリスト11
  • テストリスト12
  • テストリスト13
  • テストリスト14
  • テストリスト15

【CSS】

li:nth-child(odd) {
  color: #FF7BAC;
}
  • n=0の場合:2×0+1=1(奇数なので適用)
  • n=1の場合:2×1+1=3(奇数なので適用)
  • n=2の場合:2×2+1=5(奇数なので適用)・・・・・