CSSの疑似クラスlast-childとは?その他のおすすめ疑似クラスも解説!

皆さんは、CSSで疑似クラス「last-child」を使ったことがありますか?

画面でリスト・テーブルなどにデザインを付けるとき、last-childの使い方を覚えておくと便利です。

そこで今回は、

・CSSの疑似クラス「last-child」とは?

・CSSの疑似クラス「last-child」の使い方

といった基礎的なことから、

・CSSの疑似クラス「last-child」の使いどころ

・要素の位置を指定する他の疑似クラスは?

といった応用的な方法まで、徹底的に解説します!

CSSの疑似クラス「last-child」とは?

まず、CSSの疑似クラス「last-child」について簡単に解説します。

last-child要素の最後のみCSSを適用するための疑似クラスです。

たとえば、リストの最後のみデザインを加えたいときに使います。

サンプル:

直接クラスを用意しなくてもデザインを設定できるので、使い方を覚えておくと便利です!

CSSの疑似クラス「last-child」の使い方

次に、具体的な「last-child」の使い方について解説します。

使い方は、次のとおりです。

使い方:

例:

このように、簡単に「:last-child」をつけるだけで、要素の最後CSSを指定することができます。

CSSの疑似クラス「last-child」の使いどころ

では、どのようなタイミングでCSSの疑似クラス「last-child」を使うのでしょうか?

よくあるのが、横並びのリストで最後のみデザインを消したいとき、たとえば、liタグの右側に罫線を引くことで、要素を区切って表示するような場合です。

そのまま設定した場合は、次のように最後のリストにも区切り線が表示されてしまいます。

区切り線が最後にも表示されてしまうサンプル:

本来あるべき姿は、以下ですよね。

本来あるべき姿:

上記のように最後のみデザインを変更したい場合は、「last-child」を使います!

サンプルコード – HTML:

サンプルコード – CSS:

実行結果:

最後の区切り線を消すことができていますよね。

このように、全体に設定したデザインから、最後の要素のみ消すときに使うケースが多いため、使い方とあわせて覚えておくのがおすすめです!

要素の位置を指定する他の疑似クラスは?

ここまで疑似クラス「last-child」の概要・使い方・具体的な使いどころについて解説してきました。

ただ、最初の要素のデザインを変えたい場合や、要素の番号を指定してデザインを変更したいケースもありますよね。

last-childの仲間の疑似クラスがいくつかあるので、合わせて覚えておくのがおすすめです!

要素の位置を指定した疑似クラス一覧:

No書き方意味
1:first-child最初
2:last-child最後
3:nth-child(n)n番目
4:nth-last-child(n)後ろからn番目

first-child」使い方は、疑似クラス「last-child」と同じです。

nth-child(n)」は前からn番目要素、「nth-last-child(n)」は後ろからn番目の要素に指定することができます。

まとめ

今回は、最後の要素にデザインを指定するための疑似クラス「last-child」について解説しました。

クラスを直接指定してデザインを指定することもできますが、CSSが膨大な量になってしまうこともあるので、疑似クラスの使い方を覚えておくと便利です!

使い方も簡単なので、ぜひ使ってみてくださいね!

現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

LINEで送る
Pocket

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

フリーランスエンジニア兼ライターのワキザカ サンシロウです。
ExcelVBAの自動化ツール開発、WEB開発をメインにエンジニア業務をこなしつつ、サムライエンジニアにてライター業務をしております。

プログラミングをこれからやってみたい方に向けて、ためになる記事を全力で書いていきますので宜しくお願い致します!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説