擬似要素

The CSS Podcast - 014: 疑似要素

記事の最初の文字を非常に大きなドロップキャップにする方法を教えてください。

青いドロップキャップ付きの複数の段落

CSS では、::first-letter 疑似要素を使用して、このようなデザインの詳細を実現できます。

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

疑似要素は、HTML を追加しなくても追加要素を追加またはターゲティングするようなものです。::first-letter を使用するこのサンプル ソリューションは、多くの疑似要素の 1 つです。疑似要素にはさまざまな役割があります。このレッスンでは、使用可能な疑似要素とその使用方法について説明します。

::before、::after

::before 擬似要素と ::after 擬似要素の両方で、content プロパティを定義した場合にのみ、要素内に子要素が作成されます。

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content には任意の文字列（空の文字列でも可）を指定できますが、空の文字列以外はスクリーン リーダーによって読み上げられる可能性があります。画像 url を追加すると、画像が元のサイズで挿入されるため、サイズを変更することはできません。counter を挿入することもできます。

::before 要素または ::after 要素を作成したら、制限なく自由にスタイルを設定できます。::before 要素または ::after 要素を挿入できるのは、子要素を受け入れることができる要素（ドキュメント ツリーを持つ要素）に限られます。そのため、<img />、<video>、<input> などの要素は機能しません。

::first-letter

この疑似要素は、レッスンの冒頭で学びました。::first-letter をターゲットにする場合、すべての CSS プロパティを使用できるわけではありません。使用可能なプロパティは次のとおりです。

  • color
  • background プロパティ（background-image など）
  • border プロパティ（border-color など）
  • float
  • font プロパティ（font-size、font-weight など）
  • テキスト プロパティ（text-decoration や word-spacing など）
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

::first-line 疑似要素を使用すると、::first-line が適用された要素の display 値が block、inline-block、list-item、table-caption、または table-cell の場合にのみ、テキストの最初の行にスタイルを設定できます。

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

::first-letter 疑似要素と同様に、使用できる CSS プロパティは次のサブセットのみです。

  • color
  • background 件の宿泊施設
  • font 件の宿泊施設
  • text 件の宿泊施設

::backdrop

<dialog> や <video> など、全画面モードで表示される要素がある場合は、::backdrop 疑似要素を使用して、要素とページの残りの部分の間のスペースであるバックドロップのスタイルを設定できます。

video::backdrop {
  background-color: goldenrod;
}

::marker

::marker 疑似要素を使用すると、リストアイテムの箇条書きや番号、<summary> 要素の矢印にスタイルを設定できます。

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

::marker では、一部の CSS プロパティのみがサポートされています。

  • color
  • content
  • white-space
  • font 件の宿泊施設
  • animation プロパティと transition プロパティ

マーカー記号は、content プロパティを使用して変更できます。これを使用して、<summary> 要素の閉じた状態と空の状態にプラス記号とマイナス記号を設定できます。

::selection

::selection 疑似要素を使用すると、選択したテキストの外観をスタイル設定できます。

::selection {
  background: green;
  color: white;
}

この疑似要素を使用すると、上記のデモのように、選択したすべてのテキストにスタイルを適用できます。また、他のセレクタと組み合わせて、より具体的な選択スタイルを指定することもできます。

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

他の疑似要素と同様に、使用できる CSS プロパティは一部に限られます。

  • color
  • background-color（ただし background-image は含まない）
  • text 件の宿泊施設

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

placeholder 属性を使用して、<input> などのフォーム要素にヘルパー ヒントを追加できます。::placeholder 疑似要素を使用すると、そのテキストにスタイルを設定できます。

input::placeholder {
  color: darkcyan;
}

::placeholder は、CSS ルールのサブセットのみをサポートしています。

  • color
  • background 件の宿泊施設
  • font 件の宿泊施設
  • text 件の宿泊施設

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

疑似要素の最後は、::cue 疑似要素です。これにより、<video> 要素のキャプションである WebVTT キューにスタイルを設定できます。

セレクタを ::cue に渡すこともできます。これにより、キャプションの内部にある特定の要素にスタイルを適用できます。

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

理解度を確認する

疑似要素に関する知識をテストする

次のうち、疑似要素ではないのはどれですか。

::before
content: ''; を忘れずに追加してください。
::first-paragraph
これは CSS には存在しません。
::after
content: ''; を忘れずに追加してください。
::marker
これは、リスト要素または表示タイプを使用する場合の箇条書き要素です。
::pencil
これは CSS には存在しません。
:active
これは疑似要素ではなく疑似クラスです。

疑似要素は HTML ファイルにあります。

正しい
DevTools の [要素] パネルには疑似要素が表示されますが、疑似要素は HTML には存在せず、ブラウザが所有しています。
False
CSS でターゲティングできますが、HTML には表示されません。