CSSで「first-child」とか「before」といった擬似クラス・擬似要素を組み合わせて使いたいというケースがありました。
片方ずつならよく使ってるんですけども、複数の擬似クラス・擬似要素を使うのってどうやるのかなと思って調べてみたらものすごいシンプルな方法でできるんですね。
擬似クラス・擬似要素とは
疑似クラスは「:hover」「:first-child」など、疑似要素というのは「:before」「:after」が挙げられまして、例えば「a」はそれだけを記述すればリンクを表しますが、「a:hover」とすればリンクにカーソルが当たってるときの挙動を指定できます。
言い回しは違いますが役割としては似ていて、クラスやIDに付け加えると特別な働きをするというものです。
代表的なものをいくつかご紹介しますね。
| 疑似クラス 疑似要素 |
効果 |
|---|---|
| :hover | カーソルが重なったとき |
| :first-child | 一番最初のもの |
| :last-child | 一番最後のもの |
| :nth-child | 指定した数字のもの |
| :before | 要素の前 |
| :after | 要素の後 |
nth-childは書き方によって「偶数だけ」「奇数だけ」「最初から数えて３つ目だけ」という使い方もできて便利です。
擬似クラス・擬似要素を複数使うときの記述方法
疑似クラスや疑似要素を複数組み合わせたいときもあって、それを指定する際は「スペースなしで隣り合わせて記述する」ことで実現できます。
実例を2つご紹介しますね。
先頭にだけマークを付ける
見出しやリストなどの先頭にマークを付けたいとき、このように書くと「boxというクラス名がついた一つ目の箱の先頭にだけ●を付ける」という意味になります。
See the Pen first-child:before by delaymania (@delaymania) on CodePen.
最後の項目だけマークを外す
「パンくずリストで:afterを使って飾りを後ろにつけて、最後の1項目だけ飾りをつけない」という手法。実はこれがやりたくて調べたんですよね。
See the Pen breadcrumbs:before by delaymania (@delaymania) on CodePen.
上記のようにliを横並びにして、liの後ろに「>」という記号をつけようとした場合、最後の1つは消したいですよね。
というわけで、下記のようにlast-child:afterを追記します。
See the Pen last-child:after by delaymania (@delaymania) on CodePen.
余談ですが、リストを横並びにしたいときに使う手法として下記の2つの方法があります。table-cellを使う方法の方が個人的には好みです。お好きな方をどうぞ。
最後に
擬似クラス・擬似要素って結構多用するので、組み合わせられるとより一層便利になりますね。
みなさんもぜひ使ってみてください。そして「○○と○○を組み合わせると便利ですよ」っていうアイデアがありましたら教えてください。