【疑似クラス】:first-child/:last-childの使い方と疑似クラスの複数指定の方法

    CSSの疑似クラス

    こんにちは。

    WEBデザイナー兼プロ格闘家のショウイチです。

    今日は、CSSの疑似クラス:first-child:last-childの使い方について紹介します。

    :first-child

    それでは、まず:first-childについて説明します。

    指定した要素の中に初めて出てくる要素や子要素にcssを適用させるというものです。

    文字だけだとなかなか伝わりづらいので、実際のコードを見ていきましょう。

    See the Pen
    OJbmLMe
    by syo (@mma111syo)
    on CodePen.

    上記のリストの1番上の行だけfont-sizeを変更したい場合。

    See the Pen
    vYymByv
    by syo (@mma111syo)
    on CodePen.

    このように1番上の行だけ文字が大きくなりました。

    さらに1文字だけ色を変えたい場合は:first-letterを使います。

    See the Pen
    rNWmBzG
    by syo (@mma111syo)
    on CodePen.

    ちなみにこれは ul :first-letterをかけています。

    これが li の場合だと li の全ての1文字目の色が変わります。

    See the Pen
    BaQRBYN
    by syo (@mma111syo)
    on CodePen.

    用途に合わせて、様々な使い方ができますね。



    :last-child

    次に:last-childについて説明します。

    :last-childは文字通り最後の要素や子要素にcssを適用させるというものです。

    先ほど説明をした、:first-childの逆ですね。

    それでは、こちらもコードを見ていきましょう。

    See the Pen
    WNojOrj
    by syo (@mma111syo)
    on CodePen.

    上記のコードでは

    <li>

    border-bottom: 1px solid #444;をかけています。

    ですが、デザイン的に最後の要素にはborder-bottomがいらないという場合が、よくあると思います。

    そんな時に:last-childの出番です。

    See the Pen
    ZEBKyOo
    by syo (@mma111syo)
    on CodePen.

    上記のResultを見てわかるように、最後の要素のborder-bottomが消えていますね。

    擬似クラスの複数指定

    実は擬似クラスには便利な使い方があり、それは複数指定ができるというところです。

    こちらも実際にコードを見ていきましょう。

    See the Pen
    eYBWRbx
    by syo (@mma111syo)
    on CodePen.

    このサンプルについている この矢印は、:afterでつけています。

    このままだと、サンプルのように全ての要素に矢印が付いてしまいます。

    これを:last-childを使い最後の要素だけは矢印が付かないようにします。

    See the Pen
    eYBWRbx
    by syo (@mma111syo)
    on CodePen.

    ここで擬似クラスの複数指定を使っています。

    擬似クラスの複数指定をする際に気を付けることは順番とスペースを開けないことです。

    上記のサンプルではul li:last-child:afterと記述しています。

    これが擬似クラスの順番が
    ul li:after:last-child逆になったり
    ul li:last-child :after
    順番は正しいが不必要なスペースが付いていると、うまく作用しません。

    今回は擬似クラス:last-child:first-childについて紹介しました。

    擬似クラスは上手く使用することで、WEBデザインの幅が広がりますね。

    是非参考にしてみてください。

    それでは本日はここまで、また次回!

    本書はWeb制作の基礎言語であるHTMLやCSSの書き方だけでなく,多くのWebサイトが採用している4つのレイアウト手法を学ぶことで,1冊を読み終えると各言語の知識とWebデザインの基礎が身につく作りとなっています。Webデザインの新しい手法を積極的に紹介しつつ,実際の制作現場で使われている堅実な手法もバランスよく取り入れ,学習用ではない「現場で役に立つ」実践的なテクニックを数多く盛り込みました。