擬似要素

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-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

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

input::placeholder {
  color: darkcyan;
}

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

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

::cue

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

::cue にセレクタを渡すこともできます。 字幕内の特定の要素にスタイルを設定できます。

video::cue {
  color: yellow;
}

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

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

理解度をチェックする

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