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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
ヘルパーヒントをフォーム要素に追加できます。
たとえば、placeholder
属性を持つ <input>
などです。
::placeholder
疑似要素を使用すると、そのテキストのスタイルを設定できます。
input::placeholder {
color: darkcyan;
}
::placeholder
は一部の CSS ルールのみをサポートしています。
color
background
件の宿泊施設font
件の宿泊施設text
件の宿泊施設
::cue
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
::after
content: '';
を追加してください。::marker
::pencil
:active
疑似要素は HTML ファイルにあります。