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 プロパティを使用できるわけではないことにご注意ください。使用可能なプロパティは次のとおりです。
colorbackgroundプロパティ（background-imageなど）borderプロパティ（border-colorなど）floatfontプロパティ（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 プロパティは限られています。
colorbackground件の宿泊施設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 プロパティのみがサポートされます。
colorcontentwhite-spacefont件の宿泊施設animationプロパティとtransitionプロパティ
マーカーの記号を変更するには、content プロパティを使用します。これを使用して、たとえば、<summary> 要素の閉じた状態と空の状態を表すプラス記号とマイナス記号を設定できます。
::selection
::selection 疑似要素を使用すると、選択したテキストの外観のスタイルを設定できます。
::selection {
background: green;
color: white;
}
この擬似要素を使用すると、上のデモのように、選択したすべてのテキストのスタイルを設定できます。 他のセレクタと組み合わせて使用することで、より具体的な選択スタイルにすることもできます。
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
他の疑似要素と同様に、一部の CSS プロパティのみを使用できます。
colorbackground-color（background-image以外）text件の宿泊施設
::placeholder
placeholder 属性を持つ <input> などのフォーム要素にヘルパーヒントを追加できます。::placeholder 疑似要素を使用すると、そのテキストのスタイルを設定できます。
input::placeholder {
color: darkcyan;
}
::placeholder は、以下の CSS ルールのサブセットのみをサポートしています。
colorbackground件の宿泊施設font件の宿泊施設text件の宿泊施設
::cue
この擬似要素ツアーの最後は、::cue 擬似要素です。これにより、<video> 要素の字幕である WebVTT のキューのスタイルを設定できます。
また、セレクタを ::cue に渡して、字幕内の特定の要素のスタイルを設定することもできます。
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
理解度をチェックする
擬似要素に関する知識をテストする
疑似要素でないものは次のうちどれですか。
::beforecontent: ''; を忘れずに追加してください。::first-paragraph::aftercontent: ''; を忘れずに追加してください。::marker::pencil:active擬似要素は HTML ファイルにあります。