Webサイトを構築していると、マウスホバーやクリックする時に動きをつけることがよくあります。
動きをつける時に、対象のセレクタに対して:hoverや:activeという指定をします。このような書き方を擬似クラスといいます。
擬似クラスを使うと、CSSで要素の状態を変化させるスタイリングができるようになるので、非常に便利です。
今回の記事では、擬似クラスの使い方やよく使う場面についてわかりやすく解説していきます。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
擬似クラスの使い方
擬似クラスは、セレクタの後ろにコロン(:)をつけて使用されます。
擬似クラスの一覧とそれぞれの解説
よく使う擬似クラスの一覧です。
| 擬似クラス | 解説 |
| :hover | ホバーされた状態の要素を表します。 |
| :active | クリックされている状態の要素を表します。 |
| :nth-child(n) | 子要素を種類にかかわらず上から数え、n番目の要素を表します。 |
| :nth-of-type(n) | 同じ種類の要素を上から数え、n番目の要素を表します。 |
| :first-child | 兄弟要素グループ内で、最初の要素を表します。 |
| :last-child | 兄弟要素グループ内で、最後の要素を表します。 |
| :not() | 列挙されたセレクターに一致しない要素を表します。 |
擬似クラスの使い方をそれぞれ紹介します。
:hover
ホバーされた状態の要素を表します。文字色や背景色の変更などに使います。
p:hover{
color: red;
}
:active
クリックされている状態の要素を表します。
p:active{
color: red;
}:hoverや:activeはtransitionというプロパティを使うことで、簡単なアニメーションにすることができます。transitionの使い方についてはこちらの記事で詳しく解説しています。
:nth-child(n)
子要素を種類にかかわらず上から数え、n番目の要素を表します。
<div>
<h1>タイトル</h1>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>/*上から二番目の要素を赤色にする*/
p:nth-child(2){
color: red;
}HTMLの構造はdivタグが親要素で、h1タグとpタグが子要素となっています。:nth-childは子要素の種類に限らず上から数えるので、今回の例ではpタグをセレクタにしていてもh1を含めて上から二番目の要素が赤色となります。
:nth-of-type(n)
同じ種類の要素を上から数え、n番目の要素を表します。
<div>
<h1>タイトル</h1>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>/*pタグを上から数えて三番目を赤色にする*/
p:nth-of-type(3){
color: red;
}
:nth-of-typeは親要素の中の子要素の種類を指定して、その中でn番目の要素のスタイルを変えるか決められる擬似クラスです。今回の例ではpタグの上から三番目の文字が赤色になっています。
:first-child
兄弟要素グループ内で、最初の要素を表します。
<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>/*最初の要素を赤色にする*/
p:first-child{
color: red;
}
:last-child
兄弟要素グループ内で、最後の要素を表します。
<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>/*最後の要素を赤色にする*/
p:last-child{
color: red;
}
:not()
列挙されたセレクターに一致しない要素を表します。
<div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>/*最初の要素のみ赤色にしない*/
p:not(:first-child){
color: red;
}
擬似クラスと擬似要素の違い
擬似クラスと似たセレクタに、擬似要素があります。 擬似クラスはコロンを一つ記述していたのに対して、擬似要素を使うときはコロンを二つ記述します。
擬似要素の例
::before
要素の直前にコンテンツを追加します。
p{
position: relative;
}
p::before{
content:"";
position: absolute;
}
::after
要素の直後にコンテンツを追加します。
p{
position: relative;
}
p::after{
content:"";
position: absolute;
}::beforeや::afterを使うときは、content:"";という指定が必要です。ダブルクォーテーション（""）の中身は空白でも大丈夫です。文字や記号を使いたいときのみ記述しましょう。
まとめ
擬似クラスを使うと、ユーザーの行動に合わせて要素が動くスタイリングや特定の状態の要素や特定の子要素にスタイルを当てることができます。
擬似クラスは覚えはじめたばかりだと難しいとかんじるかもしれませんが、理解を深めるとデザインの幅が大きく広がります。ぜひ使いこなせるようにしましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
