CSS

CSSの疑似要素とは？使い方を解説

本記事では、CSSの疑似要素について詳しく解説し、その使用法と一般的な例を示します。

疑似要素とは？

疑似要素は、CSS2から導入された概念で、コロン（:）を用いて要素の一部を指定します。具体的には、::（CSS3以前では単一のコロン : ）の後に疑似要素の名前を記述します。例えば、:before や :after などがよく使われる疑似要素です。これらの要素は実際のDOMには存在せず、CSSのみでそのスタイルを定義します。

::before と ::afterの使い方

::before と ::after は、要素の最初と最後の子要素として挿入される疑似要素です。

これらを用いることで、特定の要素の前後にコンテンツを追加することができます。

例えば、アイコンの表示や装飾要素の追加に使用されます。

.button::before {
  content: "\f055"; /* Font Awesomeのアイコンコード */
  font-family: "Font Awesome";
  /* 他のスタイルプロパティを追加 */
}

.link::after {
  content: "→";
  /* 他のスタイルプロパティを追加 */
}

 

::first-line と ::first-letterの使い方

::first-line は、ブロックレベル要素の最初の行にスタイルを適用するために使用されます。

一方、::first-letter は最初の文字にスタイルを適用します。

これらの疑似要素はテキスト要素に対して特に有用です。

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

p::first-letter {
  font-size: 150%;
  font-weight: bold;
  float: left;
}

 

::selectionの使い方

::selection は、ユーザーがテキストを選択したときに適用されるスタイルを指定します。テキストをハイライト表示する際に使用します。

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

 

まとめ

CSSの疑似要素は、HTMLに直接存在しない要素にスタイルを適用するための便利な機能です。

これにより、テキストや要素の一部に装飾を加えることができ、ウェブデザインの幅が広がります。

ぜひこれらの疑似要素を上手に活用して、より魅力的で洗練されたウェブページを作成してください。

-CSS