擬似クラスと擬似要素の違いを確認してみよう

擬似クラス「:」

要素の特定な状態を指定します。「:」コロンは1つです。

• :hover
• :checked
• :last-child

要素の状態が変化したときを示します。例えば、要素の上にマウスポインタ―が乗った状態、チェックボックスがONの状態などです。要素を区別するクラスです。

記事要素と比べると、要素全体を示すことが多いような気がします。

命名ですが、擬似クラスよりかは、状態クラスとか状態変化クラスのほうが良かったかなってちょっと思いました。

全ての擬似クラスの説明を見ると、状態変化とは関係無いと様に感じる擬似クラスもありますのでざっくりと覚えておくのがいいかなと思います。

面白そうなクラスが沢山ありますね。ワクワクしますね。

サンプル

hover by mouse.

p要素の上をマウスが乗ると文字が濃くなり赤くなります。

<style>
.please-hover{
 cursor: pointer;
 border: 1px solid #555;
 border-radius: 5px;
 padding: 0 5px;
}
.please-hover:hover {
 font-weight: bold;
 color: red;
}
</style>

<p class="please-hover">hover by mouse.</p>

注意）「:」の前後にスペースをいれてはいけません。

擬似要素「::」

要素の特定の部分を示す。「::」コロンが2つ。

1つの要素の内側を区分けする感じかな。

• ::after
• ::before
• ::first-letter
• ::marker

注意）「::」の前後にスペースをいれてはいけません。

サンプル1

Hello

先頭の文字のみを修飾しています。色、太さ、大きさを変更してみました。

<style>
.fl2::first-letter {
 color: cornflowerblue;
 font-size: 2em;
 font-weight: bold;
}
</style>

<p class="fl2">Hello</p>

サンプル2

Hello

マウスオーバーでdata属性の文字を表示します。

<style>
p[data-moji]:hover::after {
 content: attr(data-moji);
 margin-left: 1rem;
 color: red;
}
</style>

<p data-moji="Hey!" class="sample">Hello</p>

サンプル3

This Article

ちょっと右上に文字列を表示してみる。ありがちな例。

<style>
.after1 {
 font-size: 1.3em;
 position: relative;
 width: max-content;
}

.after1::after {
 content: "new!";
 position: absolute;
 top: -10px;
 right: -40px;
 font-size: 0.7em;
 font-weight: bold;
 padding: 0 0.3rem;
 color: rgba(34, 34, 224, 0.876);
 margin-left: 0.5rem;
 border: 1px solid rgba(168, 213, 249, 0.8);
 border-radius: 0.5rem;
 background-color: rgba(214, 243, 225, 0.9);
}
</style>

<p class="after1 sample">This Article</p>

親をposition: relative; 子を position: absolute; に設定して、好きな位置に配置。

関連記事

擬似要素のbeforeとafterで画像を表示する方法【CSS】