CSSの擬似クラス「first-child」「last-child」を使って最初、最後の要素にだけスタイルを適用する方法！

Webサイト制作やプログラミング学習で、HTML要素の中から特定の項目だけを選択してスタイルを適用したい場合があります。class名やid名を毎回設定するのは非効率ですが、CSSの擬似クラス「first-child」や「last-child」を使用すると、これらの要素を効率的に選択し、目的のスタイルを適用することができます。

疑似クラスとは？

疑似クラスはHTML要素の特定の状態に応じてスタイルを適用するためのセレクタであり、要素の構造や内容ではなく「状態」や「動作」を基準にスタイリングを行うことが特徴です。疑似クラスは、文書内の要素がどのような「状態」にあるかに応じて、スタイルルールを適用します。

▼よく使われる疑似クラスの例

  • :hover — ユーザーが要素の上にマウスカーソルを置いたときに適用されるスタイル。
  • :active — ユーザーが要素をアクティブにしている時に適用されるスタイル。
  • :first-child — 親要素の最初の子要素に適用されるスタイル。
  • :last-child — 親要素の最後の子要素にスタイルを適用。

first-childプロパティの使い方

CSSの「:first-child」疑似クラスは、親要素の最初の子要素にスタイルを適用する際に用いられます。この疑似クラスを使用することで、リスト、テーブルの行、段落などのグループ化された要素の中で最初の要素だけを目立たせることができます。

▼html

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

▼css

ul li:first-child {
  color: red;
}

See the Pen
:first-child by DigitalLabo (@DigitalLabo)
on CodePen.

▼html

<table>
  <tr><td>1番目の要素</td></tr>
  <tr><td>2番目の要素</td></tr>
  <tr><td>3番目の要素</td></tr>
</table>

▼css

table tr:first-child {
  background-color: skyblue;
}

See the Pen
Untitled by DigitalLabo (@DigitalLabo)
on CodePen.

last-childプロパティの使い方

「:first-child」とは逆で、CSSの「:last-child」疑似クラスを使うと、親要素の最後の子要素に特別なスタイルを適用できます。

▼html

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

▼css

ul li:last-child {
  color: red;
}

See the Pen
:last-child by DigitalLabo (@DigitalLabo)
on CodePen.

▼html

<table>
  <tr><td>1番目の要素</td></tr>
  <tr><td>2番目の要素</td></tr>
  <tr><td>3番目の要素</td></tr>
</table>

▼css

table tr:last-child {
  background-color: skyblue;
}

See the Pen
:last-child（2） by DigitalLabo (@DigitalLabo)
on CodePen.

番号で指定できる疑似クラス

「:nth-child()」疑似クラスは、親要素の子要素の中から特定の順序にある要素を選択してスタイルを適用するのに使用されます。この疑似クラスを利用することで、例えば「2番目の要素」や「偶数番目の要素」に特定のスタイルを適用することが可能です。

▼html

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
</ul>

▼css

ul li:nth-child(2) {
  color: red;
}

See the Pen
:nth-child() by DigitalLabo (@DigitalLabo)
on CodePen.

▼html

<ul>
  <li>1番目の要素</li>
  <li>2番目の要素</li>
  <li>3番目の要素</li>
  <li>4番目の要素</li>
  <li>5番目の要素</li>
  <li>6番目の要素</li>
</ul>

▼css

ul li:nth-child(even) { /*奇数個目を指定する場合はodd*/
  color: red;
}

See the Pen
:nth-child()（偶数） by DigitalLabo (@DigitalLabo)
on CodePen.

まとめ

CSSの疑似クラスは、HTML要素に対してその状態や条件に応じてスタイルを適用するのに非常に便利です。JavaScript等を使わずに動的なスタイル変更を簡単に行うことができるのも魅力です。

関連記事

TOP
TOP