CSSの擬似クラスを使いこなそう

擬似クラスという言葉を聞くと難しく聞こえるかもしれませんが、使ってみるとそこまで複雑なものではありません。

擬似クラスを使いこなせるようになると、HTML,CSSの記述を減らし保守性の高いコードが書けるようになります。

この記事では擬似クラスの種類と使い方について解説しています。
また、記事の最後には具体的な活用方法も紹介しているので最後までご覧ください。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

擬似クラスとは

擬似クラスを一言で表すと「特定の状態に対してのみスタイル（CSS）を当てるセレクタを作る」です。
「特定の番号に対してスタイルを当てるモノ」や「特定のユーザーの動作に対してスタイルを当てるモノ」など、さまざまな状態を指定することができます。
文章で説明するよりも見た方が早いので、コードと結果を中心に解説していきます。

まずは、擬似クラスの便利さを知ってもらうために、一例として擬似クラスを使うとできるようになることを紹介します。

リストを作って、偶数番目のアイテムの文字色をオレンジに変えてみます。

擬似クラスを使わない場合

See the Pen
擬似クラスを使わない場合 by ZeroPlus (@zeroplus-programming)
on CodePen.

擬似クラスを使った場合

See the Pen
:nth-child(2n) by ZeroPlus (@zeroplus-programming)
on CodePen.

二つのHTMLとCSSの記述の仕方の違いを見てみましょう。
【擬似クラスを使わない場合】は.evenというクラス名に当てることによって文字色をオレンジに変えています。
対して、【擬似クラスを使った場合】はクラス名は使わずに擬似クラスを使うことによって文字色をオレンジに変えています。

:nth-child(2n)は「２の倍数の子要素に対して当てるよ」という意味で使われているので、クラス名で指定しなくても、自動的に２の倍数スタイルが当たります。

特定の要素を指定してスタイルを当てることができるので、記述量を減らすことやより実践的なコードを書くことができます。
この段階では「擬似クラスって便利そうだな」くらいの理解で問題ありません。

色々な擬似クラス

次に、擬似クラスで指定できる状態について知っていきましょう。
ここでは、授業で使うものを中心に紹介していきますが、他にもどんなことができるか気になる方は、擬似クラス - CSS: カスケーディングスタイルシート | MDNを参考にしてください。

:first-child

See the Pen
:first-child by ZeroPlus (@zeroplus-programming)
on CodePen.

「最初の子要素に対してのみスタイルを当てる」という擬似クラスです。

li:first-childと書くことによって、複数個あるliタグのうちの「最初のliタグに対してのみcolor: orange;というスタイルを当てる」という結果になっています。
ちなみに、 「first」 は「最初の」という意味があるので、直訳するとそのまま「最初の子」ということで覚えやすいです。

:last-child

「最後の子要素に対してのみスタイルを当てる」という擬似クラスです。

See the Pen
:last-child by ZeroPlus (@zeroplus-programming)
on CodePen.

li:last-childと書くことによって、複数個あるliタグのうちの「最後のliタグに対してのみcolor: orange;というスタイルを当てる」という結果になっています。

こちらも、 「last」は「最後の」という意味があるので、直訳するとそのまま「最後の子」ということで覚えやすいですね。

:nth-child(n)

「n番目の子要素に対してのみスタイルを当てる」という擬似クラスです。
こちらは書き方が複数通りあります。

まずは単純に順番を指定

See the Pen
:nth-child(n) by ZeroPlus (@zeroplus-programming)
on CodePen.

:nth-child(n)の( )の中にある数字が、「何番目の子要素に対してスタイルを当てるか」というのを決めています。

例えば、li:nth-child(1)に対してcolor: orange;と書いているので、結果は「１番目の子要素の文字がオレンジになる」となります。

また、li:nth-child(2)に対してbackground: orange;と書いているので、結果は「２番目の子要素の背景色がオレンジになる」となり、li:nth-child(3)に対してbackground: lightblue;と書いているので、結果は「３番目の子要素の背景色が水色になる」となります。

このようにして、特定の番号に対してスタイルを当てることができます。

複数の子要素を指定

See the Pen
:nth-child(2n) by ZeroPlus (@zeroplus-programming)
on CodePen.

こちらは冒頭で紹介した、「２の倍数の子要素に対しスタイルを当てる」というものです。CSSを見てみると、li:nth-child(2n)と書かれています。

では、どのような仕組みでこの書き方で、スタイルを当てる要素が指定されているか解説します。

:nth-child(n)の( )の中にある「n」は、０から始まる正の整数が当てはまります。

つまり、

n = 0, n = 1, n = 2, n = 3, n = 4, n = ...,
と言うように、上限なく正の整数が当てはまります。

すると、:nth-child(2n)と書いた時に、

n = 0　→　2n = 0
n = 1　→　2n = 2
n = 2　→　2n = 4
n = 3　→　2n = 6

となり、:nth-child(0), :nth-child(2), :nth-child(4), :nth-child(6)と言う指定を一括で行うことができると言うわけです。

奇数番目の子要素を指定

こちらの書き方をみると、「n = 0」から始まっていることが重要となっています。
もし、「n = 1」から始まっていたら、この書き方だと「n = 1　→　2n+1 = 3」 となっているため、１番目に対してスタイルが当たりません。

:nth-child(2n+1)と言う書き方も覚えておくと良いです。
他にも「n」を使った書き方がありますので、詳しくは:nth-child() - CSS: カスケーディングスタイルシート | MDNを参考にしてください。

:not()

「特定の状態『以外』にスタイルを当てる」という擬似クラスです。

See the Pen
:not() by ZeroPlus (@zeroplus-programming)
on CodePen.

li:not(:first-child)と書くと「:first-child以外 = 最初の子要素以外に対してcolor: orange;と言うスタイルを当てる」といった意味になります。

そのため、「アイテム１」以外の文字がオレンジ色という結果になります。

このようにして、:not()は( )に入れた指定を除いてスタイルを当てることができます。

:nth-of-type(n)

「n番目のタグに対してスタイルを当てる」という擬似クラスです。

See the Pen
:nth-of-type() by ZeroPlus (@zeroplus-programming)
on CodePen.

:nth-child(n)は、n番目の子要素だったので:nth-child(2)だと「アイテム２」に対してスタイルが当たります。
しかし:nth-of-type(n)の場合は、「n番目の『タグ』に対してスタイルを当てる」ので、.item:nth-of-type(2)と言う書き方でも、タグごとに適応が行われます。
それ以外は:nth-child(n)と同様の使い方をします。

:hover

ユーザーの、主にマウスカーソルの動作に対して使われる擬似クラスです。
「マウスカーソルがホバーした時（要素の上に乗った時）にスタイルを当てる」というものになります。

See the Pen
:hover by ZeroPlus (@zeroplus-programming)
on CodePen.

「ボタン」という文字にカーソルを合わせてみてください。
そうすると、「色がオレンジになる」「下線が入る」の二つの変化が起こります。
これは、a:hoverに当てられているスタイルが、「マウスカーソルがホバーした時に当たっている」からです。
このようにして、ユーザーの動作に対してスタイルを当てることも、擬似クラスは可能です。

暗記する必要はありませんが、使うタイミングでこちらの記事を見ながらでも書けるようになるとよいでしょう。

擬似クラスの活用例

擬似クラスの活用例を紹介します。

偶数番目だけ並びが入れ替わる

See the Pen
demo - :nth-child(2n) by ZeroPlus (@zeroplus-programming)
on CodePen.

偶数番目だけ入れ替わる場合は、次のように:nth-child(2n)と組み合わせて使います。
２番目のパーツだけ逆並びになっているので、

.works-item:nth-child(2n) {
  flex-direction: row-reverse;
}

とすることによって、HTMLの構造を変えなくても偶数番目のパーツを逆向きにできます。

要素と要素の間に余白を開ける

See the Pen
demo - :not(:first-child) by ZeroPlus (@zeroplus-programming)
on CodePen.

先ほどと同箇所で、要素と要素の間にだけ余白を開けたい時にも擬似クラスが使えます。

.works-item:not(:first-child) {
  margin-top: 32px;
}

このように書けば、
「最初の子要素以外にmargin-topをつける」=「要素の間にのみ余白をつける」
といった結果ができます。

:not(:first-child)には、このようにして、実践的な使い方をすることもできます。

先述した通り実際に使えることが重要ですので、模範解答などから擬似クラスを使ったスタイルの当て方に注目してみると、CSSをより効率良く書くことにつながります。

まとめ：擬似クラスを使って特定の条件でスタイルを当てられる

さまざまな擬似クラスについて解説しました。擬似クラスを使用することで、特定の要素や条件に応じてスタイルを当てることができるようになります。

全てのはたらきを暗記しなくとも、必要なときに、検索して使い方を調べられるようになっていればOKです。使用頻度の高い擬似クラスは自然と書き方や挙動を覚えていきます。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー