【疑似クラス】:first-child/:last-childの使い方と疑似クラスの複数指定の方法
こんにちは。
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デザインの幅が広がりますね。
是非参考にしてみてください。
それでは本日はここまで、また次回！
NEW POST
-
HEX, CMYK, RGB 変換出力
-
403エラー｜海外からWordPressのアクセスできない時の対処（ロリポップ）
-
スクショでHP全体を撮る方法（Mac）
