2016/06/20CSSで「first-child」とか「before」といった擬似クラス・擬似要素を組み合わせて使いたいというケースがありました。片方ずつならよく使ってるんですけども、複数の擬似クラス・擬似要素を使うのってどうやるのかなと思って調べてみたらものすごいシンプルな方法でできるんですね。先頭にだけマークを付ける最後の項目だけマークを外す最後に擬似クラス・擬似要素とは疑似クラスは「:hover」「:first-child」など、疑似要素というのは「:before」「:after」が挙げられまして、例えば「a」はそれだけを記述すればリンクを表しますが、「a:hover」とすればリンクにカーソルが当たってるときの挙動を指定できます。言い回しは違いますが役割としては似ていて、クラスやIDに付け加えると特別な働きをするというものです。代表的なものをいくつかご紹介しますね。要素の後nth-childは書き方によって「偶数だけ」「奇数だけ」「最初から数えて3つ目だけ」という使い方もできて便利です。疑似クラスや疑似要素を複数組み合わせたいときもあって、それを指定する際は「スペースなしで隣り合わせて記述する」ことで実現できます。実例を2つご紹介しますね。先頭にだけマークを付ける見出しやリストなどの先頭にマークを付けたいとき、このように書くと「boxというクラス名がついた一つ目の箱の先頭にだけ●を付ける」という意味になります。CodePen.最後の項目だけマークを外す「パンくずリストで:afterを使って飾りを後ろにつけて、最後の1項目だけ飾りをつけない」という手法。実はこれがやりたくて調べたんですよね。CodePen.上記のようにliを横並びにして、liの後ろに「>」という記号をつけようとした場合、最後の1つは消したいですよね。いうわけで、下記のようにlast-child:afterを追記します。CodePen.余談ですが、リストを横並びにしたいときに使う手法として下記の2つの方法があります。table-cellを使う方法の方が個人的には好みです。delaymania最後に擬似クラス・擬似要素って結構多用するので、組み合わせられるとより一層便利になりますね。みなさんもぜひ使ってみてください。「○○と○○を組み合わせると便利ですよ」っていうアイデアがありましたら教えてください。WEBサイトの制作や管理、WEBサービスの運営、iPhoneアプリ開発などをやってます。chord」のギタリストで曲も作ったりしてます。Macなどのコンピューター系の話題など、WEBデザイナーの管理人が気になった情報を発信しているブログです。株式会社ondoホームカテゴリ。