CSSの擬似クラスnth-child系の使い方を覚える

CSSの擬似クラスnth-child系の使い方を覚える

CSSでデザインするときの参考に他の人のCSSを見ると、擬似クラスのnth-childを使用してることも多いので「きっとnth-childは便利なのだろう」と単純に考えた結果、CSSの擬似クラスnth-child系の使い方を覚えることにしました。

私自身CSSのnth-child系を一度も使用したことがない猛者です。こんにちは。

 

CSSの擬似クラス「nth-child」

 

CSSの「nth-child」は、指定の要素が特定の状態である場合にスタイルを適用できる擬似クラスとして指定し、nth-childの値によって特定の状態をコントロールできます。

たとえばolとliのリスト要素とコロンで繋いだ擬似クラスのnth-child()をセレクタとして記述した以下のような場合

 

ol li:nth-child(2){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
    width: 290px;
}

 

olの子要素のli要素のうち「上から2番目」の<li></li>要素にスタイルを適用できます。これがCSSの擬似クラスnth-childの基本的な使い方として覚えておきたいことです。

 

 

そしてCSSの擬似クラスnth-childは、例えばリストの最初と最後の<li></li>要素だけにスタイルを適用したり、偶数や奇数の要素にスタイルを適用したりなど、できることの範囲は基本的なnth-childの使い方以外にも数多くあります。

数多くあるnth-childの使い方を覚えるには、値の使い方とnth-childと関連してる擬似クラスの使い方を覚える必要があります。

nth-childと関連してる擬似クラスをnth-child系として含めてCSSでの使い方を覚えておこうと思います。

 

Advertisement

 

nth-child系の使い方で覚えておきたい種類

 

CSSの「nth-child系」の擬似クラスで覚えておきたい種類は以下の4つです。

 

  • :nth-child()
  • :first-child
  • :last-child
  • :nth-last-child()

 

nth-child系の使い方はどれも擬似クラスとしてスタイルを適用したいCSSのセレクタに記述します。

:first-childで指定することは:nth-child()でも指定が可能だったり、:last-childで指定することは:nth-last-child()でも可能だったりと、記述したCSSの適用結果は同じでも記述が異なります。

それぞれの使い方を具体的に指定して覚えていこうと思います。

 

first-childとlast-childで最初と最後の要素を指定

 

CSSの擬似クラスで:first-childと:last-childを使用すると、最初と最後の要素にスタイルシートを適用することがでます。

たとえばol要素のクラスと子要素のliでCSSのセレクタにする場合

ol要素はクラスを付与し、10個のli子要素を入れた以下のHTMLを使用します。

 

<ol class="nth_lists">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ol>
.nth_lists li:first-child{
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}
.nth_lists li:last-child{
    background-color: rgb(252, 152, 255);
    color: deeppink;
    padding: 10px;
}

 

CSSでは「.nth_lists li:first-child」と指定すると最初の<li>要素に、「.nth_lists li:last-child」と指定すると最後の<li>にスタイルを適用することができます。

 

 

CSSのbackground-colorで最初の<li>をグリーンで、最後の<li>をピンクにして表示結果をわかりやすくしました。

このときの指定で擬似クラスを:first-childではなく:nth-child()と:nth-last-child()を指定する使い方でも最初と最後の要素にスタイルを適用できます。

 

.nth_lists li:nth-child(1){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}
.nth_lists li:nth-last-child(1){
    background-color: rgb(252, 152, 255);
    color: deeppink;
    padding: 10px;
}

 

  • 最初の要素にはnth-child(1)
  • 最後の要素には:nth-last-child(1)

 

nth-child()も:nth-last-child()も指定するときには値のカッコ内に整数を記述して最初から1番目の要素と最後から1番目の要素と特定の状態を指定します。

 

Advertisement

 

first-childとlast-childの使い方だけなら擬似クラス名で要素のどこを特定にしてスタイルを適用できるか覚えやすです。

しかしnth-child()と:nth-last-child()も同時に覚えておくと要素の最初と最後だけに限らず特定の要素だけを指定するときに柔軟な使い方ができるので覚えておきたいです。

 

nth-childの値で特定の要素だけを指定

 

:nth-child()は先述した:first-childと:last-childを拡張した擬似クラスと言えます。

CSSで擬似クラスの:nth-child()を使用すると値に指定した番号の要素だけにスタイルシートを適用する使い方ができます。

たとえば、最初から2つ目の<li>に:nth-child()を指定する使い方は、「.nth_lists li:nth-child(2)」と指定します。

 

.nth_lists li:nth-child(2){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

 

これはnth-childの値で指定してCSSを適用したい特定の要素が上から数えて2番目に配置してるため、値の整数2で特定の要素を判定させた状態のセレクタにする使い方ができます。

特定の要素を最後の要素にしたい場合には、<li>が10個あるとしたらnth-child(10)にすれば最後の<li>にスタイルが適用できます。

 

<li>が10個あるリストにnth-child(10)と指定したけど、ここでまたnth-child系の種類には要素の最後から特定の要素を指定することができる擬似クラスが存在します。

 

.nth_lists li:nth-last-child(1){
    background-color: rgb(252, 152, 255);
    color: deeppink;
    padding: 10px;
}

 

上記CSSのように:nth-last-child(1)を使用するとnth-child(10)と指定したのと同じ適用結果を得られます。

ここまでの時点でCSSでnth-childが1番に柔軟な使い方ができるnth-child系の種類の擬似クラスだと実感できるようになってきました。

 

奇数をoddで偶数をevenで指定する

 

CSSの擬似クラスで:nth-child()と:nth-last-child()は奇数と偶数の要素にスタイルシートを適用することができます。

 

  • 奇数の要素は「odd」
  • 偶数の要素は「even」

 

アルファベットの数で奇数と偶数を覚えてしまうと良いです。

oddとevenは値として指定する使い方をします。

 

.nth_lists li:nth-child(odd){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}
.nth_lists li:nth-child(even){
    background-color: rgb(252, 152, 255);
    color: deeppink;
    padding: 10px;
}

 

使い方を覚えるために:nth-child()の擬似クラスセレクタを使用して、リスト上からの<li>には奇数のoddで背景をグリーン、偶数の場合は上からevenで背景をピンクで表示するようにしました。

 

 

リストの奇数要素も偶数の要素も倍になった要素に全てそれぞれのスタイルを適用できるので簡単かつ覚えやすいnth-childの使い方です。

nth-childで上から奇数、nth-last-childで下からとか指定する使い方をすると奇数と偶数のカウントが分かりにくくなるので上と下どちらから指定するか統一した方が良さそうです。

たとえば上からはoddの奇数リストに、下からevenの偶数リストをそれぞれの色で適用してみようとしたとき。その記述が以下のCSSです。

 

.nth_lists li:nth-child(odd){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}
.nth_lists li:nth-last-child(even){
    background-color: rgb(252, 152, 255);
    color: deeppink;
    padding: 10px;
}

 

 

  • リスト上から指定したnth-child(odd)の奇数は反映しない
  • リスト下からのnth-last-child(even)の偶数は奇数のスタイルを上書き。

 

この理由は私のCSSがポンコツなだけでした。

 

Advertisement

 

リスト下からevenって偶数条件だからリスト番号で言うと下から「9、7、5、3、1…」なのですね..

一方でリスト上からの奇数のoddはリスト上から「1、3、5、7、9…」同じ要素に上下からスタイルを適用しようとした使い方が原因でミスってました。

このような場合にはリスト下からはnth-last-child(odd)で上から偶数要素に適用したかのように適用できる使い方ができます。

 

nth-childで倍数の何個おきかを指定

 

奇数をoddで偶数をevenで指定するのとは違い、要素に2つおきや3つおきの倍数にしてスタイルシートを適用する使い方をnth-childでしたい場合には「An+B」という形式で値を指定します。

 

  • Aではいくつおきに適用するかを
  • Bではいくつ目の要素に適用するかを指定します。
  • nには0から順に0、1、2…と数が入ります。

 

「いくつおきにn+いくつ目の要素から適用」みたいな覚え方になるかと思います。

 

.nth_lists li:nth-child(2n+1){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

たとえば「2n+1」と指定した場合には値の右辺に記述した1で一個目からになり、左辺の2で2つおきとなるため1つ目、3つ目、5つ目…と奇数の要素にスタイルシートを適用することができます。この指定結果はnth-child(odd)でも同じ結果です。

 

 

nth-childの値に「2n+2」と指定した場合

 

.nth_lists li:nth-child(2n+2){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

結果はnth-child(even)で偶数の要素に適用する場合と同じ結果です。

 

.nth_lists li:nth-child(3n+1){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

同じように、3つおきに適用する場合には「3n+1」のようにすればリストの1番上から3の倍数でスタイルが適用できます。

10個あるリストに「1n+6」と指定した場合。一個おきに6個目のリストからと言う指定になりますが表示結果は少し数字を苦手とする私には理解しづらかったです。

 

.nth_lists li:nth-child(1n+6){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

 

何個おきになった気配がない表示結果ですが、nには0から順に0、1、2…と数字が入る、そして1の倍数は「1、2、3、4、5…」なので6個目から10番目までに指定したスタイルが反映するという覚え方にたどり着きました。

 

nth-childでどこからどこまでと特定する指定

 

CSSの擬似クラスnth-childでどこからどこまでと特定する場合の使い方も覚えて指定できるようにしておきたいです。

使い方の例としてnth-childの値を(-n+3)と指定します。これによりスタイルの適用は最初の3つの要素にスタイルシートが適用できます。

 

.nth_lists li:nth-child(-n+3){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
}

 

 

仕組みとしては「An+B」のAにマイナス値を指定できることと、「An+B」の算出結果は0より大きい整数が有効になるためです。

たとえば使い方の例に使用した「-n+3」の算出値は3、2、1、-1となるので、3つ目、2つ目、1つ目の要素のみにスタイルシートが適用される。という覚え方です。

要素の下から3つの要素を特定してスタイルを適用したい場合には、nth-child系の擬似クラスでnth-last-child(-n+3)という使い方をすると1番下の要素から3つの要素に指定することができます。

 

 

nth-child系の擬似クラスで範囲を絞り込む

 

nth-childの値を(-n+3)とかnth-last-childで(-n+3)のようにした場合のスタイルの適用範囲は、1番上の要素から3つとか、下から3つのように上下で範囲を絞ることになります。

そうではなくて上下の要素以外の真ん中3つなどで範囲に絞り込んでCSSを適用させたい場合があります。

そのようなときにはnth-child系の擬似クラスを複数にしたセレクタにすることで範囲を絞り込む使い方ができました。

 

.nth_lists li:nth-child(n+2):nth-child(-n+9){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
    transform: skew(-10deg);
    width: 290px;
}

 

たとえばnth-childを2個使用して「nth-child(n+2):nth-child(-n+9)」 と指定すると、li要素数が10個ある場合では上2番目からの要素と下2番目からのli要素の範囲に絞り込んでCSSが反映できます。

 

 

もしくはnth-child(n+2):nth-last-child(n+2)とセレクタに指定した場合でも同じ範囲の絞り込み結果になります。

 

.nth_lists li:nth-child(n+2):nth-last-child(n+2){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
    transform: skew(-10deg);
    width: 290px;
}

 

「An+B」の形式を使用してるので、値の右辺で何個目の要素から範囲を絞り込むのかを指定して適用範囲を決めます。

 

複数のリストがある場合の表示

 

複数のリストがある場合のnth-child()の適用がどうなのかも覚えておきたいです。

たとえば2つのol要素を作って奇数の<li>にはグリーンで、偶数の<li>にはオレンジで表示するように指定しました。

 

.nth_lists li:nth-child(odd){
    background-color: rgb(68, 228, 214);
    color: deeppink;
    padding: 10px;
    transform: skew(-10deg);
    width: 290px;
}
.nth_lists li:nth-child(even){
    background-color: rgb(240, 206, 111);
    color: deeppink;
    padding: 10px;
    transform: skew(-10deg);
    width: 290px;
}

 

 

2つの番号つきリストを表示してますが2つ目のリストの最初の要素はオレンジではなくてグリーンが適用されます。

CSSで:nth-child()などの適用は同じ階層のグループごとに適用され表示できるということになります。

ということは1つ目のリストの1番上のliの上に試しに空spanでもぶち込んでみると、1つめのリストだけは偶数、奇数の順になるということですね。

CSSカテゴリの最新記事