疑似要素の基本｜書き方、使い方とサンプル

疑似要素とは

疑似要素は指定したセレクタの一部分にスタイルを適用する要素です。

疑似要素には以下のような物があります。

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

上記の５つの疑似要素は利用する機会の多い疑似要素です。

それぞれの使い方を見ていきます。

::after

疑似要素（::after）は、要素の直後にスタイルを適用します。

以下、画像は例です。

以下は画像のソースコードです。

.sample::after {
     content: 'after';
     color: red;
}

::before

疑似要素（::before）は、要素の直前にスタイルを適用します。

以下、画像は例です

以下は画像のソースコードです。

.sample::before {
     content: 'before';
     color: blue;
}

::first-letter

疑似要素（::first-letter）は、始めの文字にスタイルを適用します。

以下、画像は例です

以下は画像のソースコードです。

.sample::first-letter {
     color: red;
}

::first-line

疑似要素（::first-line）は、最初の行にスタイルを適用します。

各行は<br>で改行しています。

以下、画像は例です

以下は画像のソースコードです。

.sample::first-line {
     color: red;
}

::selection

疑似要素（::selection）は、指定の要素にマウス操作した際にスタイルを適用します。

マウスで文字をドラッグしています。

以下、画像は例です

以下は画像のソースコードです。

.sample::selection {
	background-color: red;
}

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

疑似要素は要素の一部分にプロパティと値（スタイル）を与えることができます。

疑似要素の使い方としては、

p::before {
    content: "「";
    color: black;
}

反対に、疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。

疑似クラスの使い方としては、

.sample:hover {
    color: blue;
}

このように、疑似要素はコロン「::」一つ。疑似クラスはコロン「:」で表します。

疑似要素のクイズ！

疑似要素を使ってみよう！

疑似要素は「::」コロン２つをセレクタの後に付けることで機能します。

疑似要素を使うことで新たな文字を追加したり、要素の一部分に限定してスタイルを反映させることができます。これらは、より繊細なカスタマイズに向いています。

もしも、疑似要素を利用される場合は、簡単な疑似要素から利用してみてはいかがでしょうか。

疑似クラスの基本｜書き方、使用例とサンプル

疑似クラスとは疑似クラスは指定したセレクタの全体にスタイルを反映させることができます。例えば、疑似クラス《hover》を【sample】クラスに付ける場合、.sample:hover { background-c...

zeroga.com

2022.04.14