first-child、last-child、first-of-type、last-of-type CSSの擬似クラス4つまとめ

0

メモも兼ねてCSSの擬似クラス4つをまとめたいと思います。

擬似クラスを活用することでデザインの幅が広がるので、ぜひ参考にしてみてください。

CSSの擬似クラスとは?

CSSの擬似クラスについてMDNでは以下のような説明がされています。

CSS の疑似クラスセレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。例えば :hover 疑似クラスで、ユーザーがマウスポインタを当てたときにボタンの色を変更することができます。

引用:https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

 

少し内容が難しいですね。各用語をまずは抑えてみましょう。

セレクターとはCSSを適用させたいHTMLを指定させたものです。文章にすると少し難しい気もしますが、Web制作をやったことがある人なら誰でも知っているものです。

ここではpタグの文字入りを指定しているのですが、まさにpの部分がセレクタですね。

CSSを適用させたいHTML(pタグ)を指定させたもの。ここでは文字色を赤にするように指定しています。

色指定のcolor:がプロパティ、実際どんな色にするのか?→red; これが値と呼ばれる部分になります。

ここでもう一度、先ほどの引用文を見てみましょう。

CSS の疑似クラスセレクターに付加するキーワードであり、選択された要素対して特定の状態を指定します。

セレクターの部分をpタグと読み替えると分かりやすいかもしれません。

少しモヤが晴れたところで、実際の擬似クラスを書いてみましょう。

ここでは引用文にあるように、マウスを載せると文字色が赤色から黒色になる擬似クラスを書いてみます。

See the Pen BxpEBY by code-school (@code-school) on CodePen.

擬似クラスの記述は、セレクタ: 擬似クラスと記述していきます。

元々から設定していた要素に対して、拡張してデザインを変更できるものと考えるとイメージしやすいと思います。ここでは、赤の文字色にマウスを乗った時に黒色に変更する擬似クラスを使ってみました。

 

first-childとは?

話しが逸れてしまいましたが、擬似クラスには様々なものがあります。先ほどはマウスを乗った時になんらかの変化を指定する:hoverを紹介しましたが、ここからは本題の擬似クラスを紹介していきます。

first-childは、1番最初の要素に別でデザインを指定することができます。

例えばリストの記述で、最初の要素だけ文字色を変更したり大きさを変えたりしたいとします。

これはfirs-childを適用することで簡単に実行することができます。

See the Pen RyKOWZ by code-school (@code-school) on CodePen.

 

last-childとは?

次にlast-childについての説明を。これはfirst-childの逆ですね。

つまり、最後の要素に対しての特別な指定をすることができます。

せっかくなので現場でも使われるlast-childの使い方を見ていきましょう。

 

例えば、あなたがトップメニューのデザインで下記のようなデザインにしました。

どうやってコーディングしますか?liタグを使って横並びにして、、、そしてメニュー間の区切り線は要素の右側に線を引くboder-rightで実装できそうです。

See the Pen ergoRm by code-school (@code-school) on CodePen.

なんだか微妙に違いますね。MENU4の右にも縦線があります。

それもそのはずで、boder-rightは指定した要素の右側に対して線を描画するプロパティになります。

では、どうすればいいのか?ここで使えるのが最後の要素だけに特別な指定ができるlast-childですね。

See the Pen OZWGar by code-school (@code-school) on CodePen.

最後のliタグだけにborder-right{display:none;}と記述し右側の白線を消しています。

 

first-of-typeとは?

ここまでfirst(last)-childを見てきました。

次にfirst-of-typeを見ていきますが、例えばこういったケースがあるとします。

これをソースコードにすると、こんな感じ。

 

ここで本日〜の箇所をリード文として色を変えたいとします。

要素の最初だけ・・・先ほど紹介したfirst-childが使えそうです。実際に使ってみましょう。(細かいデザインは省いてリード文の箇所だけ文字色を赤にします)

See the Pen JvEqKp by code-school (@code-school) on CodePen.

変化なしですね。first-childは厳密に言うとその要素の最初の部分に適用するのではなく、最初に指定した要素が記述通り(ここではpタグ)の場合のみ適用されます。

cotentの最初の要素はpタグではなくh1タグになっていますね。

では、どうすればいいのか?

ここで使えるのがfirst-of-typeとなります。contentクラスの最初の要素、ではなくcontentクラスの最初のpタグ要素、としたい場合にはfirst-of-typeとなります。

See the Pen BxpeVN by code-school (@code-school) on CodePen.

 

last-of-typeとは?

これもfirst-of-typeの逆バージョンですね。

See the Pen odBRQm by code-school (@code-school) on CodePen.








 

About Author

Comments are closed.