[CSS] 擬似クラスって複数繋げられるの知ってました?

こんにちは! ヨス（プロフィールはこちら）です。

今回はCSS（スタイルシート）の擬似クラスについてです。

じつはこれ、複数も繋げられるのをご存じですか？

たとえば、「before」「after」と同時に「first-child」や「last-child」も使えるのです！

擬似要素「:after」って便利だよね

CSSの擬似要素ってすっごく便利です。特に「:before」と「:after」は、なくてはなりません。

どういときに使うかと言うと、こんなときとか。

TOPページ » ドラゴンボールキャラクター » ピッコロ大魔王

これ、ホームページとかブログによくある「パンくず」と呼ばれるやつです。1つ前の階層に、クリックで簡単に戻れるやつです。

迷子にならないようにパンくずを落としながら歩いて行って、そのパンくずを辿って戻るようだから、こんな表現なんですけどね。

これのどこに擬似要素を使っているかと言うと、この「 » 」です。これを擬似要素の「:before」か「:after」で表示させています。

HTMLを見ると


<div class="example">
    <ul>
        <li>TOPページ</li>
        <li>ドラゴンボールキャラクター</li>
        <li>ピッコロ大魔王</li>
    </ul>
</div>


リストタグの<ul>と<li>で作っています。

今度はCSS

ではお次はCSSです。


.example li {
    float : left ;
    list-style : none ;
}
.example li:after {
    content:"»";
    margin : 0 1em ;
}

この中の「.example li:after」のところですね。ここで「»」を</li>の後に表示させるようにしています。だから「»」を文字としてHTMLに書かなくても表示されているんですね。

ところが問題発生!

ところが、このCSSを適用させると1箇所おかしいところが出てきます。見てください。

TOPページ » ドラゴンボールキャラクター » ピッコロ大魔王 »

ほら、一番右の端にまで「 » 」が出てきてしまっています。さっきのCSSでは「.example li:after」って書いていますもんね。そりゃそうです。念のため説明すると、「class」が「example」になっている領域の中の<li>すべての後に「 » 」が出る命令です。

一番右端の<li>には適用させてほしくないってことです。

そこでもう1個の擬似属性を適用!

こういうときに便利なのがあるんです。それが擬似クラスの「:last-child」です。これを使うと、一番最後に使われているHTMLタグに、別の命令を書けるんですよ。ちょっと説明が難しいですね。

上の例で言うと、<div class="example">の中で最後に出てくる<li>の「:after」では「 » 」が出ないでほしいんです。

ん!? でも、「:after」がすでに擬似的な属性ですよね!?「:last-child」も擬似属性です。2つの擬似属性を適用させる方法ってあるんでしょうか??

2つの擬似属性を適用させる方法

実はあったんです。そのまんま「 : 」で繋げるんです。


.example li {
    float : left ;
    list-style : none ;
}
.example li:after {
    content:"»";
    margin : 0 1em ;
}
.example li:last-child:after {
    content : none ;
}


「li:last-child:after」みたいに、「:last-child」の後ろに「:after」をそのまんま合体させます。これだけで、一番最後に出てくる擬似要素「:after」は「content:none;」で適用されなくなりました。

ただし、注意点があります。これ、「:after:last-child」のように順番を逆にすると効かなくなります。なので、必ず「last-child」を先に記述してくださいね。

ついでに言うと、「:before」で指定して、逆に「li:first-child:before」で制御するというのも全く同じですので!

ほかにも「:hover」と「:after」を組み合わせて、「.example:hover:after」などもできますね。いろいろと表現の幅が広がりそうです♪

オマケ: 正式には「擬似クラス」「擬似要素」という区別

今回はややこしくならないようにさりげなく書いていますが「擬似」という言葉がつくものに「擬似クラス」と「擬似要素」というものがあります。ポピュラーなやつを挙げるとこんなのです。

擬似クラス

• :hover
• :link
• :visited
• :active
• :first-child
• :last-child

擬似要素

• :before
• :after
• :first-letter
• :first-line

こんな区別になっていて、今回のを詳しく言うと「擬似クラス」と「擬似要素」をつなぐことができるんです。

でもブログなんかでちょろっとCSSをいじる人向けに書いているのでそんな細かいのはどうでもいいと思っています。

ちなみにこの記事の中では「擬似クラス」「擬似要素」を含めて「擬似的な属性」と呼んでいます。これもどっちでもいいですね（笑）。