• tips

要素の最初と最後、◯番目にクラスを適用させたい時の方法と実用例

ページネーションを作成したり、<td>や<table>要素で表を作成する際に、
◯番目の要素にだけクラスを効かせたい、という時が多々あります。
そんな時に便利な「:nth-child()」「:nth-of-type()」のクラス使用方法と、実用例をまとめました。

 

「nth」クラス一覧

種類 -child -of-type
最初 :first-child :first-of-type
最後 :last-child :last-of-type
◯番目 :nth-child(n) :nth-of-type(n)
後ろから◯番目 :nth-last-child(n) :nth-last-of-type(n)
1個だけ :only-child :only-of-type

ちなみにこの表でも:first-of-typeが活躍しています^^

 

最初の要素にだけスタイルを適用する :first-child

要素の最初にだけ指示が出せます。
:first-childは、同じ要素で構成される場合にのみ使用できるというルールがあります。
例としては<li>要素でよく使用されています。
具体的には、ぺージネーションを作成する時にとても役に立ちます。

See the Pen :first-child by maikatou (@logequal) on CodePen.dark

では、上記のようなページネーションを作成してみます。
数字の前後にはボーダーを入れるデザインにしました。

</>css

li:first-child{
    margin-right:10px;
    border-right:1px solid #3e3a39;
}

li:last-child{
    margin-left:10px;
    border-left:1px solid #3e3a39;
}

【解説】
「前の10件」と数字の間にボーダーを入れたかったので、
1番始めの<li>に指示を出し、右にボーダーを付けました。
li:first-childとして、border-right:1px solid #3e3a39;という指示を設定しました。
「次の10件」も同じく、間にボーダーを入れるべく、こちらにはli:last-childにして、スタイルを追加しました。

</>css

li:first-child i{
  margin-right:5px;
}

li:last-child i{
  margin-left:5px;
}

ついでに、左右にFont Awesomeで三角アイコンを入れましたが、こちらも疑似クラスが活躍しています。
<span>を付け、cssでli:first-child<i>を指示し、それぞれのmarginを設定しています。
「次の10件」には、:last-childで指示しています。

htmlは以下のようになります。

</>html


<ul>
   <li><a href="#"><i class="fa fa-caret-left" aria-hidden="true"></i>前の10件</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li class="current">3</li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li>次の10件<i class="fa fa-caret-right" aria-hidden="true"></i></li>
</ul>

 

最初の要素にだけスタイルを適用する :first-of-type

先程、:first-childの項目で、
:first-childは、同じ要素で構成される場合にのみ使用できるというルールがあります。と、書きました。
では、他要素が混合する場合の、◯番目の要素にだけ指示を出す方法をやってみます。

</>html

<div class="test">
 <h1>水族館に行ったら</h1>
 <p>まず初めにペンギンたちの群れが迎えてくれます。</p>
 <p>更に進むと、シロクマを見ることができます</p>
 <p>優雅に泳ぐクラゲを見たら、次のエリアです</p>
</div>

1行目にだけ別のクラスを指示したい場合、
まず <p>要素の前に<h1>が入っているところに注目します。
この場合に、:first-childを使用しても、適用されません。

というわけで、ここで登場するのが:first-of-typeです。

See the Pen RVqRmv by maikatou (@logequal) on CodePen.dark

このように、<h1>を無視して、<p>の中から1番目に指定が効きます。

 

最後の要素にだけスタイルを適用する。 :last-childと:last-of-type

</>css

.test p:last-child{
  background-color:#d6efec;
}

.test p:last-of-type{
  background-color:#d6efec;
}

最後の要素にだけ指定したい時に使用します。
上記のページネーションでも登場しました。

 

◯番目の要素にだけスタイルを適用する。 :nth-child(n)と:nth-of-type(n)

</>css

.test p:nth-child(n){
  background-color:#d6efec;
}

.test p:nth-of-type(n){
  background-color:#d6efec;
}

これもよく使うかな、と思います。

 

奇数の要素にだけスタイルを適用する。 :nth-child(odd)と:nth-of-type(odd)

</>css

.test p:nth-child(odd){
  background-color:#d6efec;
}

.test p:nth-of-type(odd){
  background-color:#d6efec;
}

<td>要素で表を作成する際に、
背景色を交互に入れ替えたい、ということがありますが、そういった時に使えます。

See the Pen aWQmZG by maikatou (@logequal) on CodePen.dark

こんな感じの表で、表自体がもっと長い時に使用すると、見やすい表になるかと思います。

 

偶数の要素にだけスタイルを適用する。 :nth-child(even)と:nth-of-type(even)

</>css

.test p:nth-child(even){
  background-color:#d6efec;
}

.test p:nth-of-type(even){
  background-color:#d6efec;
}

奇数があれば偶数の設定もありますよね。

 

まとめ

only-childと:only-of-typeに関してはあまり使わないかな、と思うので割愛します…。
何かいい使い所を見つけたら追記します。

「:nth-child()」「:nth-of-type()」は使い方としては似ていますが、
機能が異なります。その辺りを理解して使用していきたいですね。