2015年3月6日

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

css-last-child-after-300

こんにちは! ヨス(@yossense)です。

今回はCSSの擬似クラスについてです。かなり偏った内容ですが、ネットで検索しても出てこなかったので。

擬似要素「: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をいじる人向けに書いているのでそんな細かいのはどうでもいいと思っています。

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

さて、今回はかなりマニアックでした。でもGoogleで検索しても上手くたどり着かなかったので、これは記事にせな!と思いました。きち(@YOSHI_YANO)さん、教えてくれてありがとう!

友達の きちさんの記事にはもっと詳しい説明がありますのでこちらもどうぞ。

参考: 擬似クラスと擬似要素を複数指定する方法 : bridge

WEB関係のスキルを学ぶのって独学では時間がかかりますが、今ならオンラインで学べるスクールもあります。

たとえば完全にオンラインで学べるTechAcademy [テックアカデミー]なら、「Webリニューアル集中プログラム」という超ターゲットを絞ったコースがあります。

このコースがオススメな理由は、今現在運営しているサイトをリニューアルすることがゴールであること。

つまり、例えば学生なら10万円以下で今のサイトのリニューアルができ、さらに技術が身につくという一石二鳥なコースです。

プロにお願いするとものすごく制作費がかかるので長い目でみると、今学ぶことはかなり合理的です。

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!