擬似クラスという名前を聞くと難しく聞こえるかもしれませんが、実際使ってみるとそこまで複雑なものではありません。
擬似クラスを使いこなせるようになると、HTML,CSSの記述を減らし保守性の高いコードが書けるようになります。
この記事では擬似クラスの種類と使い方について解説しています。
また、記事の最後には具体的な活用方法も紹介しているので最後までご覧ください。
- 擬似クラスとは何か
- 擬似クラスの種類
- 擬似クラスの使い方
目次
擬似クラスとは
擬似クラスを一言で表すと「特定の状態に対してのみスタイル（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)という指定を一括で行うことができると言うわけです。
奇数番目の子要素を指定
奇数番目を指定したい時は、:nth-child(2n+1)と書きます。
「n = 0」から始まっていることが重要となっています。
もし、「n = 1」から始まっていたら、この書き方だと「n = 1 → 2n+1 = 3」 となるため、１番目に対してスタイルが当たりません。しかし、実際は「n = 0」からなので１番目も含むことができ、この書き方で奇数番目を指定することができます。
他にも「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)との違いになります。
それ以外は: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をより効率良く書くことにつながります。
まとめ
ここまでで、CSSの擬似クラスについて説明してきました。
以下の内容が押さえられていれば次の記事に進みましょう。
- 擬似クラスとは何か
- 各擬似クラスの使い方
アウトプットとして擬似クラスが使えそうな部分を見つけたら、積極的に使ってみましょう！
