CSSの疑似要素(疑似クラス)に関する解説【ウェブデザイン技能検定 1級学科範囲】

2024年7月10日 2024年7月9日 8分16秒

タスラ t3l

CSSの疑似要素は特定の要素の一部にスタイルを適用するための強力なツールです。
疑似要素を正しく使用することで、ウェブページのデザインを細かく制御できます。

この記事では、CSSの主要な疑似要素について説明し重ね掛けや組み合わせの注意点についても解説します。
また、nth-childなどのnth系の疑似クラスについても触れます。
疑似クラスと疑似要素の表記の違いについても説明しますので是非最後まで読んでいただけたら嬉しいです。

1 主要な疑似要素
2 主要な疑似クラス
3 重ね掛けの注意点
4 疑似クラスと疑似要素の組み合わせ
5 正しい組み合わせの例
6 その他の注意点
7 疑似クラスと疑似要素の違い

主要な疑似要素

以下は、よく使われるCSSの疑似要素の一覧とその使用例です。

::before と ::after

要素の内容の前後にコンテンツを挿入します。

p::before {
    content: "Before ";
}

p::after {
    content: " After";
}

::first-line

要素の最初の行にスタイルを適用します。

p::first-line {
    font-weight: bold;
}

::first-letter

要素の最初の文字にスタイルを適用します。

p::first-letter {
    font-size: 2em;
    color: red;
}

::selection

ユーザーがテキストを選択したときに適用されるスタイルを指定します。

::selection {
    background: yellow;
    color: black;
}

主要な疑似クラス

疑似クラスは、特定の状態にある要素にスタイルを適用するために使用されます。
以下は、よく使われる疑似クラスの一覧です。

nth系の疑似クラスのような要素の順序に基づいてスタイルを適用するためのものも一部載せています。

:hover

ユーザーが要素にカーソルを乗せたときにスタイルを適用します。

a:hover {
    color: red;
}

:focus

ユーザーが要素にフォーカスしたときにスタイルを適用します。

input:focus {
    border-color: blue;
}

:active

ユーザーが要素をアクティブにしたときにスタイルを適用します（例えば、クリックしたとき）。

button:active {
    background-color: yellow;
}

:disabled

無効化された要素にスタイルを適用します。

input:disabled {
    background-color: grey;
}

:checked

チェックされた状態の要素にスタイルを適用します。

input:checked {
    background-color: green;
}

:nth-child(n)

要素が親のn番目の子である場合にスタイルを適用します。

li:nth-child(2) {
    color: blue;
}

:nth-last-child(n)

要素が親の最後からn番目の子である場合にスタイルを適用します。

li:nth-last-child(2) {
    color: red;
}

:nth-of-type(n)

同じタイプの兄弟要素のn番目の子である場合にスタイルを適用します。

p:nth-of-type(2) {
    font-size: 1.5em;
}

:nth-last-of-type(n)

同じタイプの兄弟要素の最後からn番目の子である場合にスタイルを適用します。

p:nth-last-of-type(1) {
    font-weight: bold;
}

重ね掛けの注意点

疑似要素を重ねて使用する場合、特定の制約があります。
以下に、重ね掛けの際の注意点を示します。

疑似クラスと疑似要素の組み合わせ

疑似要素に疑似クラスを重ねて使用する場合は適用の順序や組み合わせに制約があります。
例えば、::first-letter疑似要素にlast-child疑似クラスを適用することはできません。

誤った例:

p::first-letter:last-child {
    color: blue;
}

上記の例は文法エラーになります。
最初の文字は一つしかないのにそれの最後といったような二重で指定するような形になってしまっています。
疑似要素と疑似クラスの適用順序に注意が必要です。

正しい組み合わせの例

疑似クラスと疑似要素を正しく組み合わせる例を示します。

正しい例:

p:first-child::first-letter {
    color: green;
}

この場合、<p>要素が最初の子である場合、その最初の文字にスタイルを適用します。
誤った例とは違い、要素から指定しその後文字を指定しているので、辻褄が合う形になります。

その他の注意点

複数の疑似要素の使用: 一つの要素に対して複数の疑似要素を使用することは可能ですが、各疑似要素は独立して適用されます。
ブラウザの互換性: 一部の疑似要素は古いブラウザでサポートされていない場合があります。常に最新のブラウザ互換性情報を確認してください。

疑似クラスと疑似要素の違い

CSSでは疑似クラスと疑似要素を区別して使用します。
これらは異なる役割を持ち、表記方法も異なります。

疑似クラス

疑似クラスは、特定の状態にある要素にスタイルを適用するために使用されます。疑似クラスはコロン（:）で始まります。

例:

a:hover {
    color: red;
}

上記の例では、リンク要素にホバー状態（マウスが上にある状態）で赤い色を適用します。

疑似要素

疑似要素は、要素の特定の部分にスタイルを適用するために使用されます。疑似要素はダブルコロン（::）で始まります。
CSS2の仕様では疑似要素もシングルコロン（:）で表記されていましたがCSS3以降はダブルコロンを使用するのが推奨されています。

例:

p::first-letter {
    font-size: 2em;
    color: blue;
}

上記の例では、段落要素の最初の文字に対してスタイルを適用しています。

まとめ

CSSの疑似要素を正しく使用することで、ウェブページのデザインを細かく制御できます。疑似要素と疑似クラスを組み合わせる際には、適用順序や組み合わせの制約に注意が必要です。以下に主要な疑似要素とその使用例をまとめました：

::before と ::after: 要素の前後にコンテンツを挿入
::first-line: 要素の最初の行にスタイルを適用
::first-letter: 要素の最初の文字にスタイルを適用
::selection: テキスト選択時のスタイルを指定
nth系の疑似クラス: 要素の順序に基づいてスタイルを適用

また、疑似クラスと疑似要素の違いについても理解し、適切に使用することで、より洗練されたウェブデザインが可能になります。
無駄なタグやセレクタを増やさなくて済むケースや、アニメーションなどに関わってくる部分、インタラクティブコンテンツ・インタラクションデザインにも大きく関係してくるところになりますので、是非活用いただけたらと思います。