18.
擬似要素と擬似クラス
擬似要素と擬似クラスとは
擬似要素と擬似クラスは、セレクタのオプションをつけることで、要素により細かな指定ができます。
| 項目 | 説明 |
|---|---|
| 疑似要素 | HTMLで範囲外または、存在しない要素に対して適用するセレクタ |
| 疑似クラス | 要素が特定の状態になったときに反映されるセレクタ |
疑似要素
擬似要素の指定方法
擬似要素はセレクタに :: （セミコロン２つ）をつけて指定します。
CSS
要素::設定値 {
content: '文字';
}
contentプロパティ
contentプロパティで、文字などのコンテンツを表示することができます。
CSS
要素::設定値 {
content: '文字';
}
セレクタ
擬似要素の代表的なセレクタ指定をみていきましょう。
::before
::beforeは、指定した要素の直前に要素を作成します。
要素::before {
}
::after
::afterは、指定した要素の直後に要素を作成します。
要素::after {
}
::first-letter
::first-letterは、要素の一番初めの文字に指定します。
要素::before {
}
見出しに文字を表示
h2タグのbeforeで、contentを設定します。
style.css
h2::before {
content: '♠︎';
margin-right: 8px;
}
結果
見出しに「♠︎」が表示されました。
疑似クラス
擬似要素の指定方法
擬似要素はセレクタに : （セミコロン）をつけて指定します。
CSS
セレクタ:設定値 {
}
aタグの擬似クラス
擬似クラスはいろいろとありますが、aタグでよく使われる擬似クラスをあげてみます。
:hover
;hoverは要素にマウスポインターが当たったときに反映されます。
a:hover {
}
:link
:linkは、まだ訪問していないリンクのスタイルを反映します。
style.css
a:link {
}
:active
:activeは、クリックするなどユーザー操作によってアクティブになったときにスタイルを反映します。
style.css
a:active {
}
:visited
:visitedは、訪問済みのリンクのスタイルを反映します。
style.css
a:visited {
}
リンクのマウスオーバー設定
aリンクをマウスオーバー（hover）したときに、文字色を変更します。
style.css
a:hover {
color: #ff7b00;
}
結果
リンクをマウスオーバーして文字色を確認してみましょう。
演習
問題１
指定した要素pの直前にコンテンツを表示するセレクタはどれですか？
- p.before
- p.after
- p::before
- p::after
問題２
マウスオーバーしたときにスタイルを反映するセレクタはどれですか？
- a.active
- a:active
- a:hover
- a.hover