パンくずを設置しようとした際、「: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といった疑似クラスや疑似要素は単体で使用する機会が多かったのですが、組み合わせて使うといったことがあまりなかったので少し手間取ってしまいました…
今回の内容が少しでも参考になれば幸いです。