擬似要素と擬似クラスの種類と使い方
主な擬似要素は、以下の5つがあります。
| :before | 要素の前に追加される |
| :after | 要素の後に追加される |
| :first-letter | 要素の一文字目を指定 |
| :first-line | 要素の1行目を指定 |
| :selection | テキスト要素をクリックまたは、ドラッグした際の要素を指定 |
そして、主な擬似クラスは、以下になります。
| :hover | 要素をホバーしたときの指定 |
| :active | 要素をクリックして離すまでの指定 |
| :focus | 要素をクリックした後の指定 |
| :link | まだ訪問していないリンクに対しての指定 |
| :visited | 訪問したリンクに対しての指定 |
| :checked | ラジオボタンなどがチェックされた時の指定 |
| :nth-child(n) | 親要素内のn番目の子要素を指定 |
| :first-child | 親要素内の最初の子要素を指定 |
| :last-child | 親要素内の最後の子要素を指定 |
| :nth-of-type(n) | 親要素内で同じ種類の子要素のn番目を指定 |
| :not(A) | A以外の要素に対して指定 |
今回、擬似要素と擬似クラスの両方を一気に解説すると、記事が長くなってしまうため、
今回の記事 ➡️ 擬似要素の解説
次回の記事 ➡️ 擬似クラスの解説
にしたいと思います。
それでは、これから擬似要素の使い方についてデモや画像を使って、わかりやすく解説していきます。
擬似要素の使い方
擬似要素とは？
擬似要素とは、CSSを使って擬似的にHTMLの要素を設定、装飾する方法です。
例えば、以下のようなHTMLコードの場合、
<p class="tex">テキストテキストテキスト</p>
ブラウザで確認したときには、以下の画像のように表示されます。
このp要素の前に要素を追加したい！という時に擬似要素を使います。
この場合、p要素の前に要素を追加したいので、CSSに以下のように記述します。
.tex:before {
content: "テスト";
color: red;
}
ブラウザでの表示
このように、擬似要素を使うと、HTMLに直接コードを書かなくても装飾や要素を追加することができます。
:before
:beforeは、HTML要素の前に、要素をいれるときに使用します。
使用例
See the Pen PozzeXE by ryu (@ryu-no-sss) on CodePen.
デモの2つ目の要素のように、positionを使うと、擬似要素の位置を調整することができます。
positionについては、以下の記事で解説しています。
:after
:afterは、HTML要素の後に、要素をいれるときに使います。
使用例
See the Pen GRqqGKy by ryu (@ryu-no-sss) on CodePen.
:first-letter
:first-letterは、HTMLのテキスト要素の一文字目のレイアウトを変更するときに使います。
使用例
See the Pen ZEOORGz by ryu (@ryu-no-sss) on CodePen.
:first-line
:first-lineは、HTMLのテキスト要素の1行目のレイアウトを変更するときに使います。
使用例
See the Pen oNLLyBe by ryu (@ryu-no-sss) on CodePen.
:selection
:selectionは、テキストに対してクリックまたはドラッグしたときに要素を変化させる擬似要素です。
使用例
See the Pen BazzVxb by ryu (@ryu-no-sss) on CodePen.
まとめ
今回は、主な擬似要素を5つ解説しました。
| :before | 要素の前に追加される |
| :after | 要素の後に追加される |
| :first-letter | 要素の一文字目を指定 |
| :first-line | 要素の1行目を指定 |
| :selection | テキスト要素をクリックまたは、ドラッグした際の要素を指定 |
擬似クラスについての解説は、以下の記事でまとめています。
それでは、最後まで読んでいただきありがとうございました。
