WEBのこと

CSSの擬似要素(:after)と擬似クラス(:last-child)を複数使ってパンくずやフローチャートを作る方法

【CSS】擬似要素と擬似クラスを繋げて使う方法

コーダーの皆さんこんにちは!

パンくずリストやフローチャートを作るときは、擬似要素(before、after)や擬似クラス(first-child、last-child)を組み合わせて使うと便利だと知っていましたか?

そもそも、複数組み合わせられることを知らない人もいると思います。

そこで本記事では《CSSの擬似要素と擬似クラスを複数使ってパンくずやフローチャートを作る方法》について書いていきます。

擬似要素(:after)だけ使ってパンくずリストを作る

上記はパンくずリストを作る際のHTMLです。

次に擬似要素だけを使ったCSSを見ていきましょう。

このHTMLとCSSの結果、このようなパンくずリストが出来上がります。

パンくずリストafterのみ

「li」の後に擬似要素の「:after」をつけることで全てのliの後に「>」右向きの矢印をつけられました。

ですが、「タイトル」が1番最後の要素なのにそこに「>」があるのはおかしいですよね。なので、擬似クラスを合わせてタイトルの後の「>」を無くしましょう!

擬似要素(:after)と擬似クラス(:last-child)を複数使ってパンくずリストを作る

HTMLは先ほどと同じで、CSSのみ変更が必要です。

上記のように、今回は追加で、「li」の後に「:last-child」を入れて、そのままスペースを開けずに「:after」を書くことで、最後の「li」だけ指定するようにしています。

そして、最後の「li」に「content:none;」を指定することで「>」を無くしています。

実際にみてみると・・・

擬似クラスと擬似要素でパンくずリスト

なくなったのが確認できました!

擬似要素と擬似クラスは順番が重要です!

◯「li:last-child:after」
×「li:after:last-child」

順番を間違えるとCSSが効かないので注意しましょう!知らないと意外とはまりますので。

これを使えばフローチャートで矢印を使う場合も最後のコンテンツの矢印のみ消すことができますよね!

広告

代表的な擬似要素と擬似クラス

この記事に辿り着いたということは、擬似要素と擬似クラスのことは知っているのではないかなと思いますが、一度どんな種類があるのかパパッと見てみましょう!

代表的な擬似要素
  • before
  • :after
  • :first-letter
  • :first-line
代表的な擬似クラス
  • :hover
  • :link
  • :visited
  • :active
  • :first-child
  • :last-child

以上が、よく使われるものですね。

擬似要素と擬似クラスの違いとしては、「擬似要素は一部の要素のみに適用され、擬似クラスは指定した全体の要素に適用される」といった違いがあります。

擬似要素と擬似クラスの使い方まとめ

本記事では《CSSの擬似要素と擬似クラスを複数使ってパンくずやフローチャートを作る方法》について書いてきました。

このテクニック、結構制作の現場では使いますよね。

基本的にパンくずは最近のワードプレステーマだと組み込まれていることの方が多いので、パンくずリストで使う機会はあまりないかもしれません。

ですが、ネットショップだと「商品が届くまでの流れ」だったり、エステサイトでは「予約から背術までの流れ」を作るときなどに擬似要素と擬似クラスを組み合わせて使うことがあります。

覚えて置いて損はないので、頭の片隅にしまっておきましょう!

▼サイト制作のお供に▼