擬似クラスセレクタは、特定の状態や条件に基づいてスタイルを適用するために使用されます。
以下に、さまざまな擬似クラスセレクタのパターンとその使用例、そして擬似クラスの詳細度について解説します。
普段使用していない方なども、しるだけでかなり便利になりますので、この機会に見直していただけたらと思います。
目次
1. 動的擬似クラスセレクタ
基礎中の基礎になりますが、動的疑似クラスセレクタです。
:hover
要素にマウスカーソルが重なったときに適用されるスタイルを指定します。
a:hover {
color: red;
}:active
要素がアクティブな状態（クリックされている状態）のときに適用されるスタイルを指定します。
a:active {
color: green;
}:focus
要素がフォーカスされたときに適用されるスタイルを指定します。
input:focus {
border-color: blue;
}2. 子要素の位置に基づく擬似クラスセレクタ
最近では使用している方も多く見かけるようになりました。子要素の位置に基づく疑似クラスセレクタです。
極めるととても便利になります。
:first-child
親要素の最初の子要素に適用されるスタイルを指定します。
p:first-child {
font-weight: bold;
}:last-child
親要素の最後の子要素に適用されるスタイルを指定します。
p:last-child {
font-style: italic;
}:nth-child(n)
親要素のn番目の子要素に適用されるスタイルを指定します。nは具体的な数字、キーワード（odd, even）、または式（2n+1など）を指定できます。
li:nth-child(2) {
color: blue;
}
li:nth-child(odd) {
background-color: lightgray;
}:nth-last-child(n)
親要素の最後から数えてn番目の子要素に適用されるスタイルを指定します。
li:nth-last-child(2) {
color: red;
}3. 特定のタイプの子要素に基づく擬似クラスセレクタ
:first-of-type
同じタイプの兄弟要素の中で最初の要素に適用されるスタイルを指定します。
p:first-of-type {
text-decoration: underline;
}:last-of-type
同じタイプの兄弟要素の中で最後の要素に適用されるスタイルを指定します。
p:last-of-type {
text-transform: uppercase;
}:nth-of-type(n)
同じタイプの兄弟要素の中でn番目の要素に適用されるスタイルを指定します。
p:nth-of-type(2) {
color: green;
}:nth-last-of-type(n)
同じタイプの兄弟要素の中で最後から数えてn番目の要素に適用されるスタイルを指定します。
p:nth-last-of-type(2) {
font-size: larger;
}4. その他の擬似クラスセレクタ
ちょっと特殊な疑似クラスセレクタです。
検定などではこういったところを中心に出題される傾向にあるような気がします。
:not(selector)
指定したセレクタに一致しない要素に適用されるスタイルを指定します。
p:not(.special) {
color: gray;
}:only-child
親要素の中で唯一の子要素に適用されるスタイルを指定します。
p:only-child {
background-color: lightblue;
}:only-of-type
親要素の中で同じタイプの兄弟要素が他にない要素に適用されるスタイルを指定します。
p:only-of-type {
border: 1px solid black;
}:empty
子要素が存在しない要素に適用されるスタイルを指定します。
p:empty {
display: none;
}::first-letter
要素の最初の一文字に適用されるスタイルを指定します。
p::first-letter {
font-size: 2em;
color: red;
}5. 擬似クラスの詳細度
詳細度
擬似クラスセレクタの詳細度（specificity）は、1クラスセレクタ（10ポイント）に相当します。詳細度は、セレクタの競合を解決するために使用されます。
詳細度が高いセレクタのスタイルが優先されます。
詳しい詳細度については別の記事で紹介していますので、是非そちらも併せてご覧ください。
詳細度の例
/* 詳細度: 0-1-0 (10ポイント) */
a:hover {
color: red;
}
/* 詳細度: 0-1-1 (11ポイント) */
a:hover .class-name {
color: blue;
}
/* 詳細度: 0-1-1 (11ポイント) */
a:hover::first-letter {
color: green;
}詳細度が同じ場合、後に書かれたセレクタが優先されます。
まとめ
擬似クラスセレクタは、特定の条件や状態に基づいてスタイルを適用するために非常に有用です。
これらを効果的に活用することで、HTML要素の状態や位置に応じた細かいスタイルの制御が可能になります。
また、擬似クラスの詳細度を理解することで、セレクタの競合を適切に管理できます。
ウェブデザイン技能検定では毎回といっていいほど過去問を見ていると出題率が高いように思います。
今回紹介しているものの中でも応用をきかせられるものなどもありますので、是非色々と調べなおしたりしていただけたらと思います。
