【CSS】:notと:first-childと::beforeを同時に使うには

パンくずを設置しようとした際、「:notと:first-childと::beforeって同時に使う方法ってどうだったっけ？」と少し迷ってしまいました。

:first-childや::beforeあたりは比較的使用頻度が高いので問題はなかったのですが、ここに:notを併せて使うというケースがあまりなかったのでとてもいい勉強になりました。

ではこの:not:first-child::beforeをどのように使ったかを紹介したいと思います。

疑似クラスと疑似要素

本題に入る前に、疑似クラスと疑似要素について簡単に説明します。

疑似クラスについて

ということですが、実際にどのような疑似クラスがあるかを見た方が分かりやすいかと思います。

a:hover{
  color: orange;
}

li:nth-child(even){
  background-color: lightblue;
}

dd:last-of-type{
  border-bottom: 1px solid red;
}

<a>タグにカーソルが乗っている状態のときは文字をオレンジで表示するといった特定の状態にある場合に指定したスタイルに変更することができるといったものです。

この疑似クラスは上記以外にもかなりの数がありますので、先ほどの引用文が載っているページなどをご覧いただくと使いたいものが色々出てくるのではないかと思います。

疑似要素について

この疑似要素については本当によく使用します。Font Awesomeを使用しているのであれば、必ずと言っていいほど疑似要素をつかっているのではないでしょうか？

.wrap::before{
  font: var(--fa-font-solid);
  content: "\f105";
  color: greenyellow;
}

.wrap::after{
  content: "この文章は.wrapの後ろに表示されます";
}

疑似要素に関しては上記の::beforeや::afterが代表的です。

あとは最初の文字にスタイルを適用する::first-letterや<li>タグなどで使用できる::markerくらいでしょうか。

調べてみましたが、この疑似要素は疑似クラスと比べても数はかなり少ないので、使用するとしても上記のものくらいかと思われます。

疑似クラスと疑似要素を組み合わせて使う

ここから本題です。

では:notと:first-childと::beforeを併せて使うにはどうすればいいでしょうか。

ですので答えはこうなります。

li:not(:first-child)::before{
  font: var(--fa-font-solid);
  content: "\f105";
  font-size: 1em;
}

これで一番最初の<li>タグ以外の前にFont Awesomeのアイコンを表示することができるようになりました。

:notや:first-childや::beforeといった疑似クラスや疑似要素は単体で使用する機会が多かったのですが、組み合わせて使うといったことがあまりなかったので少し手間取ってしまいました…

疑似クラスと疑似要素はCSS入れ子（ネスト）でも使える

ここ1、2年でChromeやEdge、FirefoxなどのモダンブラウザではSassのようにCSSを入れ子（ネスト）で書けるようになっています。

現時点でのブラウザの対応状況はこちらです「Can I use(CSS Nesting)」

今回の疑似クラスと疑似要素もCSSの入れ子（ネスト）でも書くことができます。それを踏まえた上で先程のCSSを入れ子（ネスト）で書くとこうなります。

li{
  &:not(:first-child){
    &::before{
      font: var(--fa-font-solid);
      content: "\f105";
      font-size: 1em;
    }
  }
}

CSSの入れ子（ネスト）には様々な書き方というかルールがあるので、そのあたりについては、また別の機会に触れればと思います。