擬似要素

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

この疑似要素は、レッスンの最初に紹介しました。 すべての CSS プロパティをターゲット設定に使用できるわけではない点に注意してください。 ::first-letter。 使用できるプロパティは次のとおりです。

  • color
  • background プロパティ(background-image など)
  • border プロパティ(border-color など)
  • float
  • font プロパティ(font-sizefont-weight など)
  • テキスト プロパティ(text-decorationword-spacing など)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}
で確認できます。

::first-line

::first-line 疑似要素を使用すると、テキストの最初の行のスタイルを設定できる ::first-line が適用された要素の display 値が block の場合にのみ inline-blocklist-itemtable-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

対応ブラウザ

  • Chrome: 57。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 51. <ph type="x-smartling-placeholder">
  • Safari: 10.1。 <ph type="x-smartling-placeholder">

ソース

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

input::placeholder {
  color: darkcyan;
}

::placeholder は一部の CSS ルールのみをサポートしています。

  • color
  • background 件の宿泊施設
  • font 件の宿泊施設
  • text 件の宿泊施設
で確認できます。

::cue

対応ブラウザ

  • Chrome: 26。 <ph type="x-smartling-placeholder">
  • Edge: 79。 <ph type="x-smartling-placeholder">
  • Firefox: 55。 <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

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

::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 では表示されません。