1. 序論
◎非規範的`疑似要素$は、［ 文書~言語により明示的に作成される要素 ］を超える［ 文書の抽象的な要素 ］を表現する。 疑似要素は［ 文書~treeを成す要素~~単位に制約されない ］ので、［ 文書の~tree構造に対応付けられない部位 ］であっても［ 選択して~styleする ］ために利用できる。 一例として， `first-line$pe 疑似要素は、 `出自の要素$の`整形される最初の行l$ — ~layoutにおいて~textを`折返した後^emにおけるそれ — の内容を選択でき，［ その行lにだけ，段落の残りと異なる~styleをあてがう ］ことを許容する。 ◎ Pseudo-elements represent abstract elements of the document beyond those elements explicitly created by the document language. Since they are not restricted to fitting into the document tree, they can be used to select and style portions of the document that do not necessarily map to the document’s tree structure. For instance, the ::first-line pseudo-element can select content on the first formatted line of an element after text wrapping, allowing just that line to be styled differently from the rest of the paragraph.
各~疑似要素には、 その`出自の要素$が結付けられる。 疑似要素の構文は、 `(疑似要素の名前)^pe の形をとる。 この~moduleは、［ ~CSSに存在する疑似要素 ］, および［ それらをどう~styleできるか ］を定義する。 疑似要素についての［ より一般な情報, 構文, 他の`選択子$との相互作用 ］については、 `SELECTORS-4$r を見よ。 ◎ Each pseudo-element is associated with an originating element and has syntax of the form ::name-of-pseudo. This module defines the pseudo-elements that exist in CSS and how they can be styled. For more information on pseudo-elements in general, and on their syntax and interaction with other selectors, see [SELECTORS-4].
注記： 疑似要素どうしは、 明示的に許容されない限り，一緒に連鎖し得ないことに留意しておくこと。 例えば、 `::marker::before^css は許容されないが， `::before::marker^css は許容される。 【`下位-疑似要素$を見よ。】 ◎ Note: As a reminder, pseudo-elements cannot be chained together unless explicitly allowed. For example, ::marker::before is not allowed; but ::before::marker is.
2. ~typographic疑似要素
2.1. 最初の行lを成す~text： `first-line^pe 疑似要素
`first-line@pe `疑似要素$は、 その`出自の要素$の`整形される最初の行l$の内容を表現する。 ◎ The ::first-line pseudo-element represents the contents of the first formatted line of its originating element.
次の規則は、 “各 `p^e 要素ごとに，その最初の行lに下線を引く” 【！“各 `p^e 要素ごとに その最初の行lを成す字lたちを大文字に変更する”】 ことを意味する：
p::first-line { `text-decoration$p: underline }
◎
The rule below means “change the letters of the first line of every p element to uppercase”:
• p::first-line { text-transform: uppercase }
選択子 `p::first-line^css に合致する~DOM要素は無い。 それが合致するのは、［ ~UAが各 `p^e 要素の始めの所に自動的に挿入することになる，疑似要素 ］である。 ◎ The selector p::first-line does not match any real document element. It instead matches a pseudo-element that the user agent will automatically insert at the beginning of every p element.
注記： 最初の行lの長さは、 いくつもの要因 — ~pageの横幅, ~font~size, 等々 — に依存することに注意。 ◎ Note: Note that the length of the first line depends on a number of factors, including the width of the page, the font size, etc.
例えば，次のような普通の~HTML段落は： ◎ For example, given an ordinary HTML [HTML5] paragraph such as:
`first-line-pseudo-1^xCode当の要素の横幅に依存して， 次のように何~行lかに分断されるであろう： ◎ Depending on the width of the element, its lines might be broken as follows:
`first-line-pseudo-2^dgmあるいは、 次のように： ◎ or alternately as follows:
`first-line-pseudo-3^dgm2.1.1. 整形される最初の行lの見出法
~CSSにおいては、 `first-line$pe 疑似要素の効果があるのは， `塊~容器$に付されたときに限られる： ◎ In CSS, the ::first-line pseudo-element can only have an effect when attached to a block container:
- `塊~容器$のうち［ `行内~整形~文脈$を確立するもの ］の `整形される最初の行l@ は、 その最初の`行l~box$を成す`行内~level$の内容を表現する。 ◎ The first formatted line of a block container that establishes an inline formatting context represents the inline-level content of its first line box.
- ［ `塊~容器$／`複-柱~容器$ ］のうち［ `塊~level$の（かつ`~table包装~box$でない）内容を包含するもの ］の`整形される最初の行l$は、［ その`~flow内$にある`塊~level$の子のうち，最初のもの ］の`整形される最初の行l$になる。 そのような行lは存在しない場合、 `整形される最初の行l$は無い。 ◎ The first formatted line of a block container or multi-column container that contains block-level content (and is not a table wrapper box) is the first formatted line of its first in-flow block-level child. If no such line exists, it has no first formatted line.
注記： `整形される最初の行l$は、空にもなり得る。 例えば， `<p><br>First…^samp における `p^e の最初の行lが包含する字lは無い。 したがって単語 “First” は、`整形される最初の行l$上には無く， `p::first-line^css により影響されないことになる。 ◎ Note: The first formatted line can be an empty line. For example, the first line of the p in <p><br>First… doesn’t contain any letters. Thus the word “First” is not on the first formatted line, and will not be affected by p::first-line.
注記： `塊~容器$のうち`塊~整形~文脈$に関与しないもの†の最初の行lは、その先祖~要素の`整形される最初の行l$にはなり得ない。 【† おそらく、 “`独立な整形~文脈を確立-$するもの” と記される方が正確aと思われる。】 したがって，次の~markup：
`first-text-line-1^xCodeにおける `div^e の`整形される最初の行l$は、 行l “Hello” ではなく，`行内~塊$（ `p^e ）全体を包含する行lになる。
◎ Note: The first line of a block container that does not itself participate in a block formatting context cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line “Hello”, but rather the line that contains that entire inline block.複数個の `first-line$pe 疑似要素が同じ`整形される最初の行l$を表現する場合、それらは，各自の`出自の要素$たちと同じ順序で入子にされる。 この行lを成す`行内~level$の内容 — その`根~行内~box$を成す断片も含む — は、 最も内縁な `first-line$pe `疑似要素$の中に入子にされる。 ◎ When a first formatted line is represented by multiple ::first-line pseudo-elements, they are nested in the same order as their originating elements. The inline-level contents of this line—including its root inline box fragment—are nested within the innermost ::first-line pseudo-element.
次の~markupを考える： ◎ Consider the following markup:
`first-text-line-2^xCode各~要素の `first-line$pe 疑似~要素を表現するよう，`仮想の~tag列$を書き出した結果は、次の様になろう： ◎ If we assume a fictional tag sequence to represent the elements’ ::first-line pseudo elements, it would be something like:
`first-text-line-3^xCode2.1.2. `first-line^pe 疑似要素の~style法
`first-line$pe 疑似要素により生成される`~box$は、 `行内~levelの~box$によるそれと類似に挙動するが， 一定の制約がある。 `first-line$pe 疑似要素には、 次に挙げる~propが適用される： ◎ The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level box, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:
- すべての~font~prop `CSS-FONTS-4$r ◎ all font properties (see [CSS-FONTS-4])
- `color$p, `opacity$p ~prop `CSS-COLOR-4$r ◎ the color and opacity properties (see [CSS-COLOR-4])
- すべての背景~prop `CSS-BACKGROUNDS-3$r ◎ all background properties (see [CSS-BACKGROUNDS-3])
- 植字用~propのうち，行内~要素に適用されるもの `CSS-TEXT-4$r ◎ any typesetting properties that apply to inline elements (see [CSS-TEXT-4])
- すべての~text装飾~prop `CSS-TEXT-DECOR-4$r ◎ all text decoration properties (see [CSS-TEXT-DECOR-4])
- `ruby-position$p ~prop `CSS-RUBY-1$r ◎ the ruby-position property (see [CSS-RUBY-1])
- 行内~layout~propのうち，行内~要素に適用されるもの `CSS-INLINE-3$r ◎ any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
- その他、 ~~個々の仕様により， `first-line$pe に適用されるものと定義された~prop ◎ any other properties defined to apply to ::first-line by their respective specifications
~UAは、 他の~propも適用してヨイ — ただし、 次に挙げる~propは除外される ⇒＃ `writing-mode$p, `direction$p, `text-orientation$p ◎ User agents may apply other properties as well except for the following excluded properties: • writing-mode • direction • text-orientation
注記： `first-line$pe に `line-height$p を設定すると、 `根~行内~box$を成す断片のうち［ 最初の行lの内容を包装するもの ］へ継承されるので， 最初の行l~boxの縦幅は増減され得る。 ◎ Note: Setting line-height on ::first-line inherits to the fragment of the root inline box that wraps the contents of the first line, and therefore can both increase and decrease the height of the first line box.
2.1.3. 継承と `first-line^pe 疑似要素
最初の行l上に生じる子を成す`~box断片$は、 `first-line$pe 疑似要素から標準な`継承d~prop$を`継承-$する — 上で除外した~propを除いて。 他の~propは、 `~custom~prop$ `CSS-VARIABLES-1$r も含め，すべて `first-line$pe 疑似要素の［ 疑似要素でない親 ］から継承する （最初の行l上には生じない子~要素の部位は、 常に，そのような親から継承する）。 ◎ During CSS inheritance, the fragment of a child that occurs on the first line inherits any standard inherited properties—except the properties excluded above—from the ::first-line pseudo-element. For all other properties, including all custom properties [CSS-VARIABLES-1], inheritance is from the non-pseudo parent. (The portion of a child element that does not occur on the first line always inherits from the non-pseudo parent.)
共通的な（標準な`継承d~prop$の）事例では、 `first-line$pe 疑似要素［ から／の中へ ］の`継承$は、 `first-line^pe を表現する `仮想の~tag列@ （ `fictional tag sequence^en ）を書き出すことで解せる。 ◎ In the common case (of standard inherited CSS properties), inheritance into and from a ::first-line pseudo-element can be understood by writing out a fictional tag sequence to represent ::first-line.＼
`前掲の例＠#first-line-example$を考える。 最初の描画~事例では、 `仮想の~tag列$は，次のようになる： ◎ Consider the earlier example; in case of the first rendering, the fictional tag sequence would be:
`first-line-inheritance-1^xCode2 番目の描画~事例では： ◎ And in the case of the second rendering:
`first-line-inheritance-2^xCode疑似要素が~DOM要素を分断する場合、 その効果は，［ 要素を閉じてから，また開く ］ような`仮想の~tag列$で記述できることが多い。 前掲の例を，その最初の文が `span^e 要素に包摂されるよう~mark-upしたとする： ◎ If a pseudo-element breaks up a real element, the effect can often be described by a fictional tag sequence that closes and then re-opens the element. Suppose we mark up the earlier example with a span element encompassing the first sentence:
`first-line-inheritance-3^xCode最初の描画における効果は、 次の`仮想の~tag列$と類似になろう： ◎ The effect of the first rendering would be similar to the following fictional tag sequence:
`first-line-inheritance-4^xCode【 分断された `span^e のうち最初の行lに属する方は、 `first-line^pe 疑似要素の中に入子にされるので， `first-line^pe から継承することになる。 】
2.2. 最初の字lを成す~text： `first-letter^pe 疑似要素, その子 `prefix^pe, `postfix^pe
`先頭字$（この例では埋没~頭字）には、 その前にある（それを括っている）引用符も含まれる。 ◎ A drop-cap initial letter, including the opening quotation mark before it.
`first-letter@pe `疑似要素$は、 その`出自の要素$の `最初の字lを成す~text@ を表現する — それは、 要素の`最初の字l$, および それに結付けられた約物からなる。 要素の `最初の字l@ は、 要素の`整形される最初の行l$にある［ `~Unicode字種$［ `Letter^uc（ `L*^uc ）／ `Number^uc（ `N*^uc ）／ `Symbol^uc（ `S*^uc ） ］に属する`~typographic文字~単位$ ］のうち最初のものである。 `first-letter$pe 疑似要素は、［ `先頭字$（ “持上げ頭字” や “埋没~頭字” ）などの共通的な~typographic効果 ］を作成するときに利用できる。 ◎ The ::first-letter pseudo-element represents the first Letter, Number, or Symbol (Unicode category L*, N*, or S*) typographic character unit on the first formatted line of its originating element (the first letter) as well as its associated punctuation. Collectively, this text is the first-letter text. The ::first-letter pseudo-element can be used to create “initial caps” and “drop caps”, which are common typographic effects.
例えば，次の規則は、［ `CSS-INLINE-3$r にて定義される `initial-letter$p ~prop ］を利用して，各［ `h2^e に後続する段落 ］ごとに 2 行lに~spanする埋没~頭字を作成する： ◎ For example, the following rule creates a 2-line drop-letter on every paragraph following a level-2 header, using the initial-letter property defined in [CSS-INLINE-3]:
h2 + p::first-letter { initial-letter: 3; }
注記： `最初の字l$は、 数字にもなり得る — 例： “67 億もの大金…” の "6" など。 ◎ Note: The first letter may in fact be a digit, e.g., the “6” in “67 million dollars is a lot of money.”
［ `最初の字l$, それに隣接な約物 ］に独立な~style付けを許容するため、 `最初の字l$に［ 先行して／後続して ］いて，それに結付けられる約物は， `first-letter$pe `疑似要素$の`下位-疑似要素$［ `prefix@pe （ `::first-letter::prefix^css ）／ `postfix@pe （ `::first-letter::postfix^css ） ］により表現される。 `§ 最初の字l, それに結付けられる約物＠#first-letter-pattern$ を見よ。 ◎ To allow independent styling of the first letter itself and its adjacent punctuation, associated preceding punctuation is represented by the ::prefix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::prefix); and associated following punctuation is represented by the ::postfix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::postfix). See § 2.2.1 First Letters and Associated Punctuation, below.
【 これらの下位-疑似要素は、 現時点では `first-letter$pe “~~専用” だが， 将来には他の疑似要素との組合nも定義されるかもしれない。 】
2.2.1. 最初の字l, それに結付けられる約物
`CSS-TEXT-3$r `§ 文字と字l＠~CSSTEXT#characters$ に説明されるとおり、 `~typographic文字~単位$は，複数個の~Unicode符号位置からなり得る。 例えば，結合~文字は、 その基底~文字と伴に保つモノトスル。 また，一部の言語には、 ある種の字lの組合nを扱う方法について，追加的な規則もある。 例えば~Dutchでは、 要素の始めに 字lの組合n "ij" が現れる場合，［ 両~字lとも `first-letter$pe 疑似要素の中にある ］と見なされるベキである `UAX29$r 。 ~UAは，［ `最初の字l$を選定するとき ］は、［ `first-letter$pe 疑似要素の`包含塊$の`内容~言語$ ］による［ 最初の字lに対する慣習 ］を反映するよう［ 自身による`~typographic文字~単位$の定義 ］を誂えるベキである。 ◎ As explained in CSS Text 3 § 1.4 Characters and Letters, a typographic character unit can include more than one Unicode codepoint. For example, combining characters must be kept with their base character. Also, languages may have additional rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of an element, both letters should be considered within the ::first-letter pseudo-element. [UAX29] When selecting the first letter, the UA should tailor its definition of typographic character unit to reflect the first-letter traditions of the ::first-letter pseudo-element’s containing block’s content language.
`first-letter$pe 疑似要素の`最初の字lを成す~text$には、 その`最初の字l$に［ 先行する／後続する ］文字~並びとして，次を満たすものを含めるモノトスル：
-
次に挙げる文字のみからなる：
- 約物 — すなわち、 `~Unicode字種$ `Punctuation^uc （ `P*^uc ）に属するもの `UAX44$r
- ~typographic~space — すなわち、 `~Unicode字種$ `Zs^uc に属する, かつ［ `3000^U `IDEOGRAPHIC SPACE^cn ／`単語~分離子$ ］`以外^emの文字
- 文字~並びが`最初の字l$に後続する場合、 それを成すどの約物も，`~Unicode字種$［ `Open Punctuation^uc （ `Ps^uc ）／ `Dash Punctuation^uc（ `Pd^uc ） ］には属さない。
- 文字~並びの［ 最初／最後 ］の文字は、 文字~並びが`最初の字l$に［ 先行する／後続する ］場合には，~typographic~spaceでない。
【 ［ “先行する” ／ “後続する” ］の意味は、 双方向-~textにおける並替ngの［ 前, 後 ］どちらに基づく？ 】
◎ Preceding and following punctuation must also be included as part of the first-letter text in the ::first-letter pseudo-element as follows: • All punctuation—i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]—that precedes the first letter. • Any punctuation other than opening punctuation and dashes—i.e. characters that belong to the Punctuation (P*) Unicode general category, excluding Open Punctuation (Ps) and Dash Punctuation (Pd)—that follows the first letter. • Any intervening typographic space—i.e. characters that belong to the Zs Unicode general category [UAX44] other than U+3000 IDEOGRAPHIC SPACE or any word-separator characters非正式には， `最初の字lを成す~text$の~patternは、 概ね（ `Zs^uc から除外された単語~分離子を無視するなら） `(P (Zs|P)*)? (L\|N\|S) ((Zs|P−(Ps|Pd))* (P−(Ps|Pd))?^c として，あるいは `([P] [Zs P]*)? [L N S] ([Zs [P--[Ps Pd]]]* [P--[Ps Pd]])?^c としても表現できる。 ◎ Informally represented, the first-letter text’s pattern here can be roughly (ignoring the exclusion of word separators from Zs) represented as (P (Zs|P)*)? (L\|N\|S) ((Zs|P−(Ps|Pd))* (P−(Ps|Pd))? or, alternatively, ([P] [Zs P]*)? [L N S] ([Zs [P--[Ps Pd]]]* [P--[Ps Pd]])?
`first-letter-pseudo-1^dgm［ `~typographic文字~単位$, それらの~Unicode~prop ］についての情報は、 `CSS-TEXT-3$r ［ `§ 文字と字l＠~CSSTEXT#characters$, `§ 文字の~prop＠~CSSTEXT#character-properties$ ］を見よ。 ◎ See CSS Text 3 § 1.4 Characters and Letters and CSS Text 3 § E Characters and Properties for more information on typographic character units and their Unicode properties. [CSS-TEXT-3]
2.2.2. 最初の字lを成す~textの見出法
`first-line$pe と同じく、 `first-letter$pe 疑似要素が効果を発揮するのは， `塊~容器$に付されたときに限られる。 その`最初の字lを成す~text$は、［ その`出自の要素$の`整形される最初の行l$において`行内~整形~文脈$に関与している`行内~level$の内容 ］のうち，最初に来るものになる — 同じ行lに他の`~flow内$にある内容（画像や行内~tableなど）が先行していないならば。 ◎ As with ::first-line, the ::first-letter pseudo-element can only have an effect when attached to a block container. Its first-letter text is the first such inline-level content participating in the inline formatting context of its originating element’s first formatted line, if it is not preceded by any other in-flow content (such as images or inline tables) on its line.
この目的においては、 `~marker~box$は，`~flow外$にあったかのように無視される。 一方で，要素が`~flow内$にある［ `before$pe ／ `after$pe ］内容を有する場合、 `最初の字lを成す~text$は， そのような生成d内容も要素の内容に`含める^em下で選定される。 ◎ For this purpose, any marker boxes are ignored, as if they were out-of-flow. However, if an element has in-flow ::before or ::after content, the first-letter text is selected from the content of the element including that generated content.
例えば，次の規則が与えられた下では：
p::before {content: "Note: "}
選択子 `p::first-letter^css は、 "Note" の "N" に合致する。
◎ Example: After the rule p::before {content: "Note: "}, the selector p::first-letter matches the "N" of "Note".対象の~textは存在しない場合、［ `最初の字lを成す~text$, `first-letter$pe 疑似要素 ］どちらも無い。 ◎ If no qualifying text exists, then there is no first-letter text and no ::first-letter pseudo-element.
注記： `整形される最初の行l$が空なときは、 `first-letter$pe 合致するものは無い。 例えば，~HTML片 `<p><br>First...^samp には、 最初の行lが包含する字lは無いので， `first-letter^pe に合致するものも無い。 特に，2 行l目にある “First” の “F” には合致しない。 ◎ Note: When the first formatted line is empty, ::first-letter will not match anything. For example, in this HTML fragment: <p><br>First... the first line doesn’t contain any letters, so ::first-letter doesn’t match anything. In particular, it does not match the “F” of “First”, which is on the second line.
注記： `first-line$pe と同じく，［ `塊~容器$のうち`塊~整形~文脈$に関与しないもの† ］の`最初の字lを成す~text$は、 先祖~要素の`最初の字lを成す~text$にはなり得ない。 【† おそらく、 “`独立な整形~文脈を確立-$するもの” と記される方が正確aと思われる。】 したがって，次の~markup：
`first-letter-application-1^xCodeにおける `div^e の`最初の字l$は "H" ではない。 事実，`div^e には最初の字lは無い。
◎ Note: As with ::first-line, the first-letter text of a block container that does not participate in a block formatting context cannot be the first-letter text of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first letter of the DIV is not the letter “H”. In fact, the DIV doesn’t have a first letter.`最初の字lを成す~text$のある部位が次の行lに包装される場合、 その部位は，もはや `first-letter$pe `疑似要素$の一部を形成しない。 ◎ Any portion of the first-letter text that is wrapped to the next line no longer forms part of the ::first-letter pseudo-element.
2.2.3. `first-letter^pe 疑似要素の継承と~box~tree構造
`first-letter$pe 疑似要素は、 それが表現する`最初の字lを成す~text$を~~直に包装する — その~textが子孫~内にある場合でも。 複数個の `first-letter$pe 疑似要素が同じ`最初の字lを成す~text$を表現する場合、 それらは，各自の`出自の要素$たちと同じ順序で入子にされ、 `継承$は，それに則って挙動する。 ◎ The ::first-letter pseudo-element is wrapped immediately around the first-letter text it represents, even if that text is in a descendant. When a first-letter text is represented by multiple ::first-letter pseudo-elements, they are nested in the same order as their originating elements. Inheritance behaves accordingly.
次の~markupを考える： ◎ Consider the following markup:
`first-letter-tree-1^xCode`first-letter$pe 疑似要素（たち）を表現するよう，`仮想の~tag列$を書き出した結果は、 次の様になろう： ◎ If we assume a fictional tag sequence to represent the elements’ ::first-letter pseudo-elements, it would be something like:
`first-letter-tree-2^xCode`first-letter$pe の［ `prefix^pe ／ `postfix^pe ］`疑似要素$が存在する場合、 それらは最も内縁な `first-letter$pe の中に入子にされ， 他においては `first-letter^pe 自身と類似に解釈される。 ◎ If any ::first-letter::prefix or ::first-letter::postfix pseudo-elements exist, they are nested within the innermost ::first-letter, and otherwise interpreted similar to ::first-letter itself.
次の~markupを考える： ◎ Consider the following markup:
`first-letter-tree-3^xCode`first-letter$pe 疑似要素（たち）を表現するよう，`仮想の~tag列$を書き出した結果は、 次の様になろう： ◎ If we assume a fictional tag sequence to represent the elements’ ::first-letter pseudo-elements, it would be something like:
`first-letter-tree-4^xCode
［
`最初の字lを成す~text$を形成する文字たち
］が複数個の要素にまたがる場合
（ `<p>‘<em>T...^samp 内の `‘T^samp のように）、
~UAは，
`first-letter$pe 疑似要素
（および，その`下位-疑似要素$ `prefix$pe ／ `postfix$pe ）
を それらの要素のうち［
いずれか／すべて
］から作成しても，単純に［
疑似要素（たち）を作成しない
］ことにしてもヨイ。
`最初の字lを成す~text$が行lの始端に来ない場合
（例えば，［
双方向-~textの並替ng／
`~list~item$用の`~marker~box$が
`list-style-position$p: `inside^v
を伴うこと
］に因り）、
~UAには，疑似要素（たち）を作成することは要求されない。
◎
If the characters that would form the first-letter text are not all in the same element (as the ‘T in <p>‘<em>T...), the user agent may create the ::first-letter pseudo-element (and its ::prefix or ::postfix sub-elements, if any) from one of the elements, or all elements, or simply not create the pseudo-element(s). Additionally, if the first-letter text is not at the start of the line (for example due to bidirectional reordering, or due to a list item marker with list-style-position: inside), then the user agent is not required to create the pseudo-element(s).
`first-letter$pe 疑似要素は、 `first-line$pe 疑似要素の中に包含されるので — 同じ行l上の`行内~box$と同じく — `first-line^pe から（直接間接を問わず）継承する。 ◎ A ::first-letter pseudo-element is contained within any ::first-line pseudo-elements, and thus inherits (potentially indirectly) from ::first-line, the same as any inline box on the same line.
2.2.4. `first-letter^pe 疑似要素の~style法
~CSSにおける［ `first-letter$pe `疑似要素$, および その`下位-疑似要素$としての［ `prefix$pe, `postfix$pe ］`疑似要素$ ］は、 `行内~box$に類似する。 これらには、 次に挙げる~propが適用される： ◎ In CSS a ::first-letter pseudo-element (and its ::prefix and ::postfix sub-elements) is similar to an inline box. The following properties apply to ::first-letter, ::first-letter::prefix, and ::first-letter::postfix pseudo-elements:
- すべての~font~prop `CSS-FONTS-4$r ◎ all font properties (see [CSS-FONTS-4])
- `color$p, `opacity$p ~prop `CSS-COLOR-4$r ◎ the color and opacity properties (see [CSS-COLOR-4])
- すべての背景~prop `CSS-BACKGROUNDS-4$r ◎ all background properties (see [CSS-BACKGROUNDS-4])
- 植字用~propのうち，行内~要素に適用されるもの `CSS-TEXT-4$r ◎ any typesetting properties that apply to inline elements (see [CSS-TEXT-4])
- すべての~text装飾~prop `CSS-TEXT-DECOR-4$r ◎ all text decoration properties (see [CSS-TEXT-DECOR-4])
- 行内~layout~propのうち，行内~要素に適用されるもの `CSS-INLINE-3$r ◎ any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
- 各種 ~margin／~padding ~prop `CSS22$r ◎ margin and padding properties (see [CSS22])
- 各種~border~prop, `box-shadow$p `CSS-BACKGROUNDS-4$r ） ◎ border properties and box-shadow (see [CSS-BACKGROUNDS-4])
- その他、 ~~個々の仕様により， `first-letter$pe に適用されるものと定義された~prop ◎ any other properties defined to apply to ::first-letter by their respective specifications
~UAは、 他の~propを適用してもヨイ。 しかしながら，そのような~propが `first-letter$pe に適用されても、［ `first-letter^pe により表現される`最初の字lを成す~text$ ］を成すものは，変化し得ない。 ◎ User agents may apply other properties as well. However, in no case may the application of such unlisted properties to ::first-letter change what first-letter text is represented by that ::first-letter.
注記： ~CSSの以前の~levelでは、 ~UAには、［ 字lが成す図形に基づいて［ 行l高さ, 縦幅や横幅 ］を選ぶ／ ~font~sizeを近似する／ ~layoutを遂行するときに ~glyph外形線を織り込む ］ことも許容されていた。 そのような緩く定義された魔法の可能性は、 意図的に除去された — ［ 意図される利用事例（`埋没~頭字$／`持上げ頭字$）には拙い解決策である ］ことが判明しているのみならず，相互運用能の問題の原因にもなるので。 ［ 埋没~頭字／持上げ頭字 ］の明示的な取扱いは、 `initial-letter$p `CSS-INLINE-3$r を見よ。 ◎ Note: In previous levels of CSS, user agents were allowed to choose a line height, width, and height based on the shape of the letter, to approximate font sizes; and to take the glyph outline into account when performing layout. The possibility of such loosely-defined magic has been intentionally removed, as it proved to be a poor solution for the intended use case (drop caps and raised caps), yet caused interoperability problems. See initial-letter in [CSS-INLINE-3] for explicitly handling drop caps and raised caps.
3. 強調~用の疑似要素
3.1. 強調された内容の選択-法： `selection^pe, `search-text^pe, `target-text^pe, `spelling-error^pe, `grammar-error^pe, `highlight()^pe 疑似要素
`強調~疑似要素@ （ `highlight pseudo-element^en ）は、 文書を成す［ 特定0の地位が与えられた部位 ］を表現する。 それには、 その地位を利用者に指示するため，概して他と異なる~styleがあてがわれる。 例えば，文書を成す選択された部位は、 概して，それを表す地位を指示するよう強調される （代替する背景~色と前景~色, あるいは色~滲みが与えられる）。 `強調~疑似要素$として，以下に挙げるものが定義される： ◎ The highlight pseudo-elements represent portions of a document that have been given a particular status and are typically styled differently to indicate that status to the user. For example, selected portions of the document are typically highlighted (given alternate background and foreground colors, or a color wash) to indicate their selected status. The following highlight pseudo-elements are defined:
- `selection@pe
- この疑似要素は、［ 未来にアリな，何らかの~UA操作o ］の対象になるよう選定された［ 文書を成す ある部位 ］を表現する。 例えば、［ ~copy操作oにより複製される／~paste操作oにより置換される ］ことになる［ 編集-可能な~text欄の中の選択された~text ］に適用される。 ◎ The ::selection pseudo-element represents the portion of a document that has been selected as the target or object of some possible future user-agent operation(s). It applies, for example, to selected text within an editable text field, which would be copied by a copy operation or replaced by a paste operation.
- `search-text@pe
- この疑似要素は、 ~UAの~find-in-page特能により識別された~textを表現する。 ~UAには，合致した~textを［ `強調~疑似要素$で表出-可能な仕方 ］で~styleしないものもあるので、 この疑似要素を実装することは，任意選択である。 ◎ The ::search-text pseudo-element represents text identified by the user agent’s find-in-page feature. Since not all UAs style matched text in ways expressible with the highlight pseudo-elements, this pseudo-element is optional to implement.
- `current match^en 【この疑似要素に `current$ps 疑似類を追加した場合に選択されるもの】 を識別する方法は？ `10527$issue ◎ How to identify the current match? [Issue #10527]
- `target-text@pe
- この疑似要素は、 文書~URLの`素片$urlにより†直に~targetにされた~textがあれば，それを表現する。 【† おそらく，`~URL素片~text指令＠https://wicg.github.io/scroll-to-text-fragment/$cite にて定義される形式の素片により。】 ◎ The ::target-text pseudo-element represents text directly targeted by the document URL’s fragment, if any.
- 注記： ~URLの`素片$urlが要素を~targetにしているときは、 `target$ps 疑似要素を利用して それを選定できるが， `target-text$pe には合致しない。 `target-text^pe が合致するのは、 自身が`素片$urlの~targetにされた~textに限られる。 ◎ Note: When a URL fragment targets an element, the :target pseudo-element can be used to select it, but ::target-text does not match anything. It only matches text that is itself targeted by the [fragment].
- `spelling-error@pe
- ~UAにより綴りが誤っているとされた，~textの部位を表現する。 ◎ The ::spelling-error pseudo-element represents a portion of text that has been flagged by the user agent as misspelled.
- `grammar-error@pe
- ~UAにより文法的に不正とされた，~textの部位を表現する。 ◎ The ::grammar-error pseudo-element represents a portion of text that has been flagged by the user agent as grammatically incorrect.
- `highlight()@pe
- この`関数形~疑似要素$は、 `custom-ident$t を引数にとり，当の文書を成す［ 引数に与えられた`~custom強調~名$により識別される`~custom強調$に対応する部位 ］を表現する。 引数は要求される。 詳細は `CSS-HIGHLIGHT-API-1$r を見よ。 ◎ The ::highlight() functional pseudo-element represents the portion of the document associated with the custom highlight identified by the given custom highlight name. The <custom-ident> argument is required. See [CSS-HIGHLIGHT-API-1] for details.
`強調~疑似要素$は、 要素~treeに収まるとは限らず，入子ng構造を尊守せずに要素~境界を任意にまたがり得る。 ◎ The highlight pseudo-elements do not necessarily fit into the element tree, and can arbitrarily cross element boundaries without honoring its nesting structure.
3.2. 強調の~style法
`強調~疑似要素$を~styleできる~propは、 ~AND↓ を満たすものに制限される：
- ~layoutに影響しない。 【`~securityと~privacyの考慮点＠#highlight-security$を見よ】
- ~~非常に動的な環境においても高処理能に適用できる。
- 加えて（相互運用能を確保するため）， `要求される区画＠#highlight-bounds$の中における その描画は、 `強調~overlay$の（~UAにより決定される）正確な限界域には依存しない。
次に挙げる~propは、 `強調~疑似要素$に適用される： ◎ The following properties apply to the highlight pseudo-elements:
- `color$p
- `background-color$p
- `text-decoration$p とそれに結付けられた各種~prop （【下位propの他に，】 `text-underline-position$p, `text-underline-offset$p も含む【他にもあるかも？】）。 ◎ text-decoration and its associated properties (including text-underline-position and text-underline-offset)
- `text-shadow$p
- `stroke-color$p, `fill-color$p, `stroke-width$p ◎ stroke-color, fill-color, and stroke-width
ここに含められるべき~propは、 他にもあるか？ ◎ Are there any other properties that should be included here?
注記： 歴史的に，（これを書いている時点で）相互運用可能に~supportされるものは、［ `color$p ／ `background-color$p ］に限られている。 ◎ Note: Historically (and at the time of writing) only color and background-color have been interoperably supported.
注記： `color$p ~propは、 次に挙げるものの色も設定する ⇒＃ ~text, ~textに適用されているすべての`装飾線$（下線, 上線, 取消線）, ［`出自の要素$, その先祖や子孫］により~textに適用される`圏点$（ `text-emphasis$p ） ◎ Note: The color property sets the color of both the text and all line decorations (underline, overline, line-through) and emphasis marks (text-emphasis) applied to the text by the originating element and its ancestors and descendants.
上に挙げた適用-可能な~propの値を解決するために， それら以外の~propの`算出d値$が要求される場合、 それらの算出d値は，`出自の要素$から複製される — 当の`強調~疑似要素$に指定された値は無視して。 例えば： ◎ For any properties not listed above, but which are required to resolve the values of applicable properties, their computed values are copied from those of the originating element, ignoring any values specified on the highlight pseudo-element itself. For example:
- `forced-color-adjust$p （`強制d色~mode$において色を解決するために利用される） ◎ forced-color-adjust (used in forced colors mode to resolve colors) and＼
- `color-scheme$p （`~system色$を解決するために利用される） ◎ color-scheme (used to resolve system colors)
- `font-size$p, `font-family$p, 等々 （ `em$u その他の`~fontに相対的な長さ$を解決するために利用される） ◎ font-size, font-family, etc. (used to resolve em and other font-relative lengths).
- `line-height$p （ `lh$u 単位を解決するために利用される） ◎ line-height (used to resolve lh units)
- `~custom~prop$ `CSS-VARIABLES-1$r （ `var$f 代入を解決するために利用される） ◎ custom properties [CSS-VARIABLES-1] (used in var() substitutions)
`color-scheme$p は、［ この~list, 適用-可能な~propたちが成す~list ］のどちらに入れるべきか？ [`11011$issue] ◎ Should color-scheme go here, or in the list of applicable properties? [Issue #11011]
~UAは、 `作者~出自$において，所与の`強調~疑似要素$用に指定された色が： ◎ If, for a given highlight pseudo-element,＼
- 在る場合、 それらの色を指定されたとおりに尊重するモノトスル — すなわち、 余計な処理（半-透明な滲みを利用するなど）を適用しないモノトスル。 ◎ there are colors specified in the author origin, those colors must be respected as specified; i.e. the UA must not apply any extra processing (such as using semi-transparent washes).＼
- 無い場合、 追加的な色~処理を適用してもヨイ。 ◎ However if there are no colors in the author origin, the UA may apply additional color processing.
注記： これは、 所与の作者~stylesheetに対し，［ それを解釈する すべての~UAにわたって， その色~contrastは保全される ］ことを確保するためである。 ◎ Note: This is to ensure that color contrast is preserved across all user agents interpreting a given author stylesheet.
~vendor接頭辞を伴う~prop — `-webkit-text-fill-color$p など — は、 `強調~疑似要素$には適用-可能でない。 ◎ Vendor-prefixed properties such as -webkit-text-fill-color are not applicable to the highlight pseudo-elements.
3.3. 既定の~UA~style
既定の~UA~stylesheet用として、 次の追加が推奨される： ◎ The following additions are recommended for the default UA stylesheet:
/*
［
綴り／文法
］の誤りに対する既定の~style法を，調整-可能な仕方で表現する：
◎
Represent default spelling/grammar error styling in an adjustable way
*/
:root::spelling-error { text-decoration: spelling-error; }
:root::grammar-error { text-decoration: grammar-error; }
一部の`強調~疑似要素$は、 `~pairにされた既定の強調~色@ — ~UAにより供され，一緒に［ 利用される／上書きされる ］既定の［ `color$p, `background-color$p ］を有するベキである — `§ ~pairにされた既定＠#paired-defaults$ を見よ。 それらは、 `selection$pe 用には［ `HighlightText$v, `Highlight$v ］に対応するベキであり， `target-text$pe 用には［ `MarkText$v, `Mark$v ］に対応するベキである。 ◎ Some highlight pseudo-elements should have paired default highlight colors—a default color and background-color provided by the UA that are either used or overridden together, see § 3.3.1 Paired Defaults. For ::selection they should correspond to HighlightText and Highlight, while for ::target-text they should correspond to MarkText and Mark.
~UAは、 追加的な効果を適用して強調された内容の呈示を増補してもヨイ — 例えば、 強調された~text以外の内容を薄くする／ 利用者-ヤリトリや計時に基づいて強調~styleが消えていくよう遷移する。 これらは、 ~CSSにより制御されない。 ◎ UAs may apply additional effects to enhance the presentation of highlighted content, for example dimming content other than the highlighted text or transitioning out a highlight style based on user interactions or timing. These are not controlled by CSS.
~UAは、 強調の呈示に対し，~CSSにより制御される仕方で手直しする — それは、 現在 `6853$issue にて論の最中にある。 ◎ UA tweaks to the presentation of highlights in ways that are controlled by CSS are currently under discussion in Issue 6853.
3.3.1. ~pairにされた既定
互換性の理由により、 `~pairにされた既定の強調~色$は，［ `color$p, `background-color$p ］どちらも`作者~出自$から`~cascaded値$が得られた （または、 それらの値が作者~出自から継承された） ときに限り，`使用~値$になるモノトスル。 強調~色が［ `revert$v ／ `revert-layer$v ］のときは、 ~cascadeを巻戻した`後^emの出自が，~cascaded値の`出自$を決定する。 ◎ For compatibility reasons, paired default highlight colors must only be used when neither color nor background-color yield a cascaded value from the author origin (or inherit their value from the author origin). When a highlight color is revert or revert-layer, the origin after rolling back the cascade determines the cascaded value’s origin.
注記： この規則は、 互換性を得るためにあるので， `fill-color$p や `stroke-color$p の様な他の類似な~propには適用されない。 ◎ Note: Because this rule is for compatibility reasons, it does not apply to other similar properties like fill-color or stroke-color.
例えば、 次の~markupが与えられたなら： ◎ For example, given the following markup:
<p>Highlight this <em>and this</em>.</p>
次に挙げる各~規則は、 どれも — 作者により与えられた場合には — `em^e 要素における `selection$pe 用の既定の `background-color$p を抑止することになる： ◎ Any of the following rules would suppress the default background-color for ::selection in the <em> element if given by the author:
em::selection { color: initial; }
em::selection { color: inherit; }
em::selection { color: unset; }
em::selection { color: green; }
p::selection { color: green; }
3.4. 強調を成す区画
`各種 強調~用の疑似要素＠#highlight-selectors$ — `selection$pe, `search-text$pe, `target-text$pe, `spelling-error$pe, `grammar-error$pe, `highlight()$pe — ごとに， 文書~全体~用の `強調~overlay@ が存在する — その作動中な部位は、 対応する`強調~疑似要素$により表現される。 ◎ For each type of highlighting (see § 3.1 Selecting Highlighted Content: the ::selection, ::search-text, ::target-text, ::spelling-error, ::grammar-error, and ::highlight() pseudo-elements) there exists a single highlight overlay for the entire document, the active portions of which are represented by the corresponding highlight pseudo-element.＼
各`~box$は、 自身が直に包含する［ ~text／`置換され$る内容 ］に対応する，~overlayの一部分を所有する： ◎ Each box owns the piece of the overlay corresponding to any text or replaced content directly contained by the box.
- ~text用には、 ~overlayは，少なくとも~em~box全体を覆うモノトスル。 また、 ~em~boxを行l~box辺まで更に［ 上へ／下へ ］拡張してもヨイ。 文字~間のアキもまた，~overlay区画に含めてもヨイ — そのようなアキは、［ 両側の文字とも包含する要素のうち，最も内縁なもの ］に属し，両~文字とも選択されたとき選択される。 ◎ For text, the corresponding overlay must cover at least the entire em box and may extend further above/below the em box to the line box edges. Spacing between two characters may also be part of the overlay area, in which case it belongs to the innermost element that contains both characters and is selected when both characters are selected.
- `置換され$る内容に対する~overlayは、 置換される~obj全体を覆うモノトスル。 また、 要素の`内容~box$全体を含むように外方へ拡張してもヨイ。 ◎ For replaced content, the associated overlay must cover at least the entire replaced object, and may extend outward to include the element’s entire content box.
- ~overlayはまた、 要素の`~border~box$の中の，他の区画を含んでもヨイ — そのような区画は、［ 区画を包含する要素のうち，最も内縁なもの ］に属する。 ◎ The overlay may also include other areas within the border-box of an element; in this case, those areas belong to the innermost such element that contains the area.
- ~overlayは，`行内~levelの~box$に対しては、［ `塊-軸$において、 ~boxの~border辺の外側へ，~boxが属する`行l~box$の両~辺まで ］拡張してもヨイ。 ◎ For an inline-level box, the overlay may extend outside its border edges in the block axis as far as the edges of its line box.
次を見よ： `F2F minutes＠https://lists.w3.org/Archives/Public/www-style/2008Nov/0022.html$, `dbaron’s message＠https://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html$, `Daniel’s thread＠https://lists.w3.org/Archives/Public/www-style/2010May/0247.html$, `Gecko notes＠https://lists.w3.org/Archives/Public/www-style/2010May/0261.html$, `Opera notes＠https://lists.w3.org/Archives/Public/www-style/2010May/0366.html$, `Webkit notes＠https://lists.w3.org/Archives/Public/www-style/2010May/0280.html$ ◎ See F2F minutes, dbaron’s message, Daniel’s thread, Gecko notes, Opera notes, Webkit notes
これは、 働き方を正しく述べているのか？ ◎ Not sure if this is the correct way of describing the way things work.
3.5. ~cascade法と要素ごとの強調~style
各~要素は、 作動中な自前の部位に`強調~overlay$を描く — それは、［ 当の要素を`出自の要素$とする各`強調~疑似要素$ ］に指定された~styleを受取る。 複数の~styleが競合する場合、 ~cascadeの結果により決定される~styleが勝つ。 ◎ Each element draws its own active portions of the highlight overlays, which receives the styles specified by the corresponding highlight pseudo-element styles for which that element is the originating element. When multiple styles conflict, the winning style is determined by the cascade.
所与の~supportされる~propに対し，その`~cascaded値$は無いまたは［ `inherit$v ／ `unset$v ］になるときは、 その`指定d値$は，`出自の要素$の親~要素の対応している`強調~疑似要素$から継承により決定される — 当の~propが`継承d~prop$であるか否かを問わず （`登録-済み~custom~prop$の場合、 その `inherits$d 記述子を問わず 【！`~custom~prop$の場合は，`継承-$するよう登録されたか否かに関わらず】）。 ◎ When any supported property is not given a value by the cascade, or given a value of inherit or unset, its specified value is determined by inheritance from the corresponding highlight pseudo-element of its originating element’s parent element. This occurs regardless of whether that property is an inherited property (and regardless of whether that property is a custom property that is registered to inherit or not).
加えて，`根~要素$を出自にする`強調~疑似要素$用には： ◎ Additionally, for highlight pseudo-elements originating from the root element:
- `color$p の`継承d値$は、 その`初期~値$ではなく， `currentcolor$v になる。 ◎ the inherited value of color is currentColor, not the initial value.
- `~custom~prop$は、 `根~要素$から継承される ◎ custom properties inherit from the root element.
例えば次の規則が： ◎ For example, if the following rules were applied:
p::selection { color: yellow; background: green; }
p > em::selection { color: orange; }
em::selection { color: red; }
次の~markupに適用されていた場合： ◎ to the following markup:
`highlight-cascade-1^xCode`selection$pe 用の背景の強調~色は全体が `green^v になり、 `em^e 要素の［ 外側の~text色は `yellow^v ／ 内側の~text色は `orange^v ］になる。 ◎ The selection highlight would be green throughout, with yellow text outside the <em> element and orange text inside it.
複数の選択~styleを求める作者は、 文書~全体にわたる選択~style用に `:root::selection^css を利用するベキである — そうすれば、 子孫において きれいに上書きできるようになるので。 `selection$pe だけだと，~tree内の各 要素に適用され、 より特有な~styleが先祖にあっても，それを上書きすることになる。 ◎ Authors wanting multiple selections styles should use :root::selection for their document-wide selection style, since this will allow clean overriding in descendants. ::selection alone applies to every element in the tree, overriding the more specific styles of any ancestors.
例えば、 作者が次を指定していて： ◎ For example, if an author specified
::selection { background: blue; }
p.warning::selection { background: red; }
文書が次を含んでいる場合： ◎ and the document included
`highlight-cascade-2^xCode"とても~~重要な~~情報" の強調は `blue^v になる — `strong^e 要素の `selection$pe は、 `::selection { background: blue; }^css 規則にも合致するので （型~選択子が欠落なものは、暗黙な `*^css があることに注意）。 ~style規則を次のように与えれば、意図される挙動 （強調は `p.warning^css の中では `red^v, 他所では `blue^v ）になる： ◎ The highlight would be blue over “very important information” because the <strong> element´s ::selection also matches the ::selection { background: blue; } rule. (Remember that * is implied when a tag selector is missing.) The style rules that would give the intended behavior (red highlight within p.warning, blue elsewhere) are
:root::selection { background: blue; }
p.warning::selection { background: red; }
次の例は、 `~custom~prop$の継承をデモる。 ◎ The following example demonstrates the inheritance of custom properties.
例えば，作者が次を指定した場合： ◎ For example, if an author specified
:root {
--background-color: green;
--decoration-thickness: 10px;
--decoration-color: purple;
}
::selection {
--decoration-thickness: 1px;
--decoration-color: green;
}
div::selection {
--decoration-color: blue;
background-color: var(--background-color, red);
text-decoration-line: underline;
text-decoration-style: line;
text-decoration-thickness: var(--decoration-thickness, 5px);
text-decoration-color: var(--decoration-color, red);
}
`div^e において選択された内容は、 `div::selection^css による強調により， その背景は `green^v になり, 太さ `1px^v の `blue^v な下線を伴う — これらの~styleを与える~custom~prop： ◎ A div’s selection highlight would be a green background to the selected content, with a 1px thick blue underline.＼
- `--background-color^p （背景）は、 `div::selection^css にも `selection$pe にも見出されないので， 根~要素（ `root$ps ）【！::root custom property match】からとられる。 ◎ The --background-color custom property is not found on the div::selection nor ::selection so it is taken from the ::root custom property match.＼
- `--decoration-thickness^p （下線の太さ）は、 `強調~疑似要素$の~cascadeを介して `selection^pe から継承される。 ◎ The --decoration-thickness property is inherited from ::selection via the highlight cascade＼
- `--decoration-color^p （下線の色）は、 `div::selection^css 内に見出される。 ◎ and --decoration-color is found in div::selection itself.
注記： この挙動は、 標準な実施 — 文書~全般な~custom~propを `root$ps 上で定義すること — を収容することが意図される。 ◎ Note: This behavior is intended to accomodate the standard practice of defining document-wide custom properties on :root.
3.6. 強調の塗法
3.6.1. 背景
各 `強調~疑似要素$は、 自身の背景【 `background-color$p 】を［ 対応する`強調~overlay$を成す部位の上面 ］に, かつ［ `有位置$な子孫（もしあれば）の直ぐ背後 ］に描く （すなわち、 `CSS2.2 § E.2＠~CSS22/zindex.html$ 段 8 の直前）。 それらの~overlayは、 次に挙げる順に描くとする： ◎ Each highlight pseudo-element draws its background over the corresponding portion of the highlight overlay, painting it immediately below any positioned descendants (i.e. just before step 8 in CSS2.2§E.2).＼
- `highlight()$pe
- `grammar-error$pe
- `spelling-error$pe
- `target-text$pe
- `selection$pe と `search-text$pe — どちらが先かは~UAに依存する。
3.6.2. 影
`強調~疑似要素$に適用されている `text-shadow$p は、 対応する`強調~overlay$用の背景の上面に描かれる （かつ，対象の~textと その装飾に適用された元の【`出自の要素$の】 `text-shadow$p （それも適用され続ける）の上面に）。 その結果、 各~型の`強調~疑似要素$による~text影は，互いに積層される。 ◎ Any text-shadow applying to a highlight pseudo-element is drawn over its corresponding highlight overlay background. Such text shadows also stack over each other (and over any original text-shadow applied to the text and its decorations, which continues to apply).
注記： 各`強調~overlay$用の背景は、 背後の層に属する影を遮るように，その上面に描かれる。 ◎ Note: Since each highlight overlay background is drawn over any shadows belonging to the layer(s) below, a highlight overlay background can obscure lower-level shadows.
3.6.3. ~textと~text装飾
`強調~疑似要素$は、［ 対象の~text，および［ その~textに適用された~text装飾（影~以外） ］］の通常の描法を抑止する。 代わりに，最も手前にある作動中な`強調~overlay$は、 当の強調【疑似要素】の自前の `color$p を利用して， 当の~text（および，その装飾）を`強調~overlay$用の背景~すべての上面に描直す。 ◎ A highlight pseudo-element suppresses the normal drawing of any associated text, and the text decorations (other than shadows) that had been applied to that text. Instead the topmost active highlight overlay redraws that text (and those decorations) over all the highlight overlay backgrounds using that highlight’s own color.
注記： このことは、 影と違って，［ `装飾線$／`圏点$ ］は［ 当の~text用に描かれた強調~overlay用の背景 ］により遮られないことを意味する。 ◎ Note: This means that unlike shadows, line decorations and emphasis marks won’t be obscured by any highlight overlay backgrounds that are drawn for the associated text.
この目的においては、 `強調~疑似要素$の `color$p ~propに対する `currentcolor$v は，［ `作動中な^em［ `強調~疑似要素$層 ］のうち，次に背後にあるもの ］の `color$p を表現し、 最終的には，次に~fall-backする ⇒ `color$p が指定されなかったとするとき，利用されることになる色 （［ `出自の要素$／介在している`疑似要素$（ `first-line$pe ／ `first-letter$pe など） ］により，それらに適用される色） ◎ For this purpose, currentColor on a highlight pseudo-element’s color property represents the color of the next active highlight pseudo-element layer below, falling back finally to the colors that would otherwise have been used (those applied by the originating element or an intervening pseudo-element such as ::first-line or ::first-letter).
注記： したがって，要素【`出自の要素$】に指定された~text装飾は （`装飾線$, `圏点$どちらも）、 当の疑似要素に指定された `color$p が `currentcolor$v でないならば， その色で描かれる — その元の【`出自の要素$の】［ 色／~fill ］指定に関わらず。 ◎ Note: The element’s own text decorations (both line decorations and emphasis marks) are thus drawn in the pseudo-element’s own color when that is not currentColor, regardless of their original color or fill specifications.
各 `強調~疑似要素$により導入された~text装飾は、 ~textの元の装飾【`出自の要素$の装飾】の上面に， それらの背景と同じ順序で積層され、 各自の自前の色で描かれる。 適用される通常の塗ng順序は、 `CSS2$r `§ 付録 E＠~CSS22/zindex.html#painting-order$ に従う — ［ 下線, 上線, ~text, 取消線 ］は、 この順に — 後に挙げたものほど手前に — 描かれる。 しかしながら， `selection$pe により適用される すべての~text装飾は、 代わりに，他の装飾~すべてより上に — 【当の選択された】~textと伴に，最も手前にある一群の層として — 描いてもヨイ。 ◎ Any text decorations introduced by each highlight pseudo-element are stacked in the same order as their backgrounds over the text’s original decorations and are all drawn, each decoration in its own color. The normal painting order applies, so as per CSS2 Appendix E, all underlines are drawn below overlines which are drawn below the text which is drawn below any line-throughs. However, text decorations applied by ::selection may instead all be drawn along with the text as a topmost set of layers above all other decorations.
例えば、 元の~textは下線と打消線を伴っていて, `selection$pe は下線を適用していて, `target-text$pe は［ 上線, 打消線 ］を適用していると見做すなら、 次のどちらも適合tな塗ng順序になる： ◎ For example, assuming the original text has an underline and a strike-through, that ::selection applies an underline and ::target-text applies both overline and strike-through, the following are both conformant painting orders:
- 元の下線 ◎ original underline
- `selection$pe による下線 ◎ ::selection underline
- `target-text$pe による上線 ◎ ::target-text overline
- `selection$pe で色付けられた~text ◎ ::selection-colored text
- 元の打消線 ◎ original strike-through
- `target-text$pe による打消線 ◎ ::target-text strike-through
- 元の下線 ◎ original underline
- `target-text$pe による上線 ◎ ::target-text overline
- 元の打消線 ◎ original strike-through
- `target-text$pe による打消線 ◎ ::target-text strike-through
- `selection$pe による下線 ◎ ::selection underline
- `selection$pe で色付けられた~text ◎ ::selection-colored text
`強調~疑似要素$により導入される`装飾線$は、 その`出自の要素$に結付けられた~textに限り適用され， 子孫へは — ~propの`継承$を介することを除いて — 伝播しない （`上で述べた＠#highlight-cascade$とおり）。 ◎ Line decorations introduced by highlight pseudo-elements apply only to the text associated with their originating element, and are not propagated to descendants except via property inheritance (as described above).
注記： 出自の要素の自前の装飾と違って、 強調~疑似要素に対し宣言された装飾は，［ `~flow外$にある要素／`行内~塊$ ］へも伝播する — その太さと位置は、 子孫どうしで変わり得る。 ◎ Note: Unlike the originating element’s own decorations, decorations declared on a highlight pseudo-element propagate to out-of-flow elements and inline blocks, with thickness and position varying between descendants.
3.6.4. 置換される要素
`置換され$ない内容に対しては、 ~UAは［ `color$p, `background-color$p ］の指定d値を（~alpha~channelも含め）尊守するモノトスル。 `置換され$る内容に対しては、 ~UAは［ 内容が選択から透けて見えるような半透明な膜 ］で~~覆うベキである。 この膜の色は［ `background-color$p の指定d値が `transparent$v でなければそれ ／ 他の場合は `color$p の指定d値 ］になるベキである — ~UAは、 その~alpha~channelを調整してもヨイ。 ◎ For non-replaced content, the UA must honor the color and background-color (including their alpha channels) as specified. However, for replaced content, the UA should create a semi-transparent wash to coat the content so that it can show through the selection. This wash should be of the specified background-color if that is not transparent, else of the specified color; however the UA may adjust the alpha channel.
3.7. 強調に関する~securityの考慮点
綴りや文法の誤りに対する~style付けは、 利用者の辞書の内容についての情報（利用者の名前や, 住所録の内容まで含み得る） を漏洩し得るので、［ `spelling-error$pe ／ `grammar-error$pe ］を実装する~UAは， そのような強調された区分の~style付けを~pageが読取れないよう防止するモノトスル。 【したがって、~layoutが変化するものなど，他の状態に影響して適用されたかどうか観測-可能になる~styleは、適用されないことになる。】 ◎ Because the styling of spelling and grammar errors can leak information about the contents of a user’s dictionary (which can include the user’s name and even includes the contents of their address book!) UAs that implement ::spelling-error and ::grammar-error must prevent pages from being able to read the styling of such highlighted segments.
4. ~treeに留まる疑似要素
`~treeに留まる疑似要素@ （ `tree-abiding pseudo-element^en ）は、 常に`~box~tree$の中の ある~boxに対応する。 それは、 `出自の要素$から`継承-$可能な~propすべてを継承する。 `継承-$可能でない~propは、 通例通り，各自の`初期~値$をとる。 `CSS-CASCADE-4$r ◎ Tree-abiding pseudo-elements always fit within the box tree. They inherit any inheritable properties from their originating element; non-inheritable properties take their initial values as usual. [CSS-CASCADE-4]＼
`~treeに留まる疑似要素$のうち一部は、 `全部的に~style可能な疑似要素@ （ `fully styleable pseudo-element^en ） でもある — すなわち、 本物の要素に適用されるすべての~propは，それらにも適用される。 ◎ A subset of these are the fully styleable pseudo-elements; all properties that apply to a real element also apply to a fully styleable pseudo-element.
4.1. 生成d内容~疑似要素： `before^pe, `after^pe
`content$p の算出d値が `none$v でないときは、 これらの疑似要素は， その`出自の要素$の子であったかのように†［ `content$p に指定された内容を伴う~box ］を生成する。 【†したがって、出自の要素に指定された`継承d~prop$も継承することになる。】 ◎ When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, with content as specified by content.
- `before@pe
- `after@pe
- `出自の要素$の実際の内容の［ 直前（ `before^pe ）／ 直後（ `after^pe ） ］にあって［ `~box~tree$において要素の子になる ］ような，~style可能な疑似要素を表現する。 ◎ Represents a styleable child pseudo-element immediately before the originating element’s actual content. ◎ Represents a styleable child pseudo-element immediately after the originating element’s actual content.
`before$pe, `after$pe は、 どちらも`全部的に~style可能な疑似要素$であり， 適用-可能な~propに関する制約は無い。 ◎ Both ::before and ::after are fully styleable pseudo-elements: there is no restriction on what properties apply to them.
例えば，次の規則は、 `class^a 属性~値が `note^v を含んでいる 各 `p^e 要素ごとに，その内容の前に文字列 "注記：" を挿入する： ◎ For example, the following rule inserts the string “Note: ” before the content of every <p> element whose class attribute has the value note:
p.note::before { content: "注記：" }
`display$p の初期~値は `inline$v なので、 これは`行内~box$を生成することになる。 `p^e の他の行内~boxである子と同様に，それは `p^e の行内~整形~文脈に関与し，他の内容と行lを共有し得ることになる。 ◎ Since the initial value of display is inline, this will generate an inline box. Like other inline children of <p>, it will participate in <p>’s inline formatting context, potentially sharing a line with other content.
［ `before$pe ／ `after$pe ］疑似要素は：
- 定例の要素の内容と同じく，それを成す生成d内容は、 その`出自の要素$に適用されている［ `first-line$pe ／ `first-letter$pe ］疑似要素があれば，それらの一部を形成し得る。
- 定例の子~要素と同じく，その`出自の要素$が`置換され$るときには抑止される。
4.2. ~list~marker：`marker^pe 疑似要素
`marker@pe 疑似要素は、 `~list~item$用に自動的に生成される`~marker~box$を表現する。 `CSS-DISPLAY-3$r, `CSS-LISTS-3$r を見よ。 ◎ The ::marker pseudo-element represents the automatically generated marker box of a list item. (See [CSS-DISPLAY-3] and [CSS-LISTS-3].)
`first-letter$pe は `marker$pe の内容を無視する（選定しない）。 ◎ The contents of a ::marker are ignored (not selected) by ::first-letter.
`marker$pe と `first-line$pe の相互作用は、 現在，論の最中にある。 （ `4506$issue ） ◎ Interaction of ::marker and ::first-line is currently under discussion in Issue 4506.
`marker$pe は`~treeに留まる疑似要素$であるが，`全部的に~style可能な疑似要素$ではない。 `marker$pe 疑似要素に利用できる~propは限られている。 その~listは、 `CSS-LISTS-3$r § `marker^pe に適用される~prop にて定義される。 ◎ ::marker is a tree-abiding pseudo-element, but is not fully styleable; only a limited set of properties can be used on the ::marker pseudo-element. This list is defined in CSS Lists 3 § 3.1.1 Properties Applying to ::marker.
選択子［ `::before::marker^css ／ `::after::marker^css ］は妥当であり、 それを利用すれば，`~list~item$にもなる［ `before$pe ／ `after$pe ］疑似要素の`~marker~box$を表現できる。 しかしながら， `::marker::marker^css は妥当でなく、 `marker$pe の `display$p ~propの算出d値は，それを成す `list-item$v の側面を常に失う。 ◎ The ::before::marker or ::after::marker selectors are valid and can be used to represent the marker boxes of ::before or ::after pseudo-elements that happen to be list items. However ::marker::marker is invalid, and the computed value of display on ::marker always loses any list-item aspect.
`marker$pe も`下位-疑似要素$として［ `prefix$pe, `postfix$pe ］を有するべきか？ ◎ Should ::marker also have ::prefix and ::postfix sub-elements?
4.3. 仮入力： `placeholder^pe 疑似要素
`placeholder@pe 疑似要素は、 ~form入力~欄~内の仮入力（ `placeholder^en ）~textを表現する： それは、［ 当の欄の埋め方についての~hint ］を利用者に供するような，入力~textを表現する。 例えば，日付~入力~欄の仮入力~textが "YYYY/MM/DD" であったなら、 日付を与える数を［ 年, 月, 日 ］の順序で手入力することを明確化する。 この疑似要素は、 `~treeに留まる疑似要素$である。 ◎ The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text “YYYY/MM/DD” to clarify that numeric dates are to be entered in year-month-day order. It is a tree-abiding pseudo-element.
例えば，［ `input$e ／ `textarea$e ］要素~上の `placeholder^a 属性は、 `HTML$r の意味論に則って，仮入力~textを供する。 したがって， `placeholder$pe `疑似要素$は、 そのような仮入力~textが表示されているならば，それを表現する。 ◎ For example, according to the semantics of [HTML] the placeholder attribute on the input and textarea elements provide placeholder text. The ::placeholder pseudo-element represents such text when it is displayed.
注記： `placeholder-shown$ps という`疑似類^emも存在する — それは、 仮入力~textを示している（~DOM内の）要素に適用され， そのような要素を特別に~styleするために利用できる。 `placeholder$pe は、 仮入力~textを特定的に表現するので， その能は他に比べ制限される。 ◎ Note: There also exists a :placeholder-shown pseudo-class, which applies to (real) elements while they are showing placeholder text, and can be used to style such elements specially. ::placeholder specifically represents the placeholder text, and is thus relatively limited in its abilities.
`first-line$pe 疑似要素に適用されるすべての~propは、 `CSS-INLINE-3$r にて定義されるものを除いて， `placeholder$pe 疑似要素にも適用される。 ◎ All properties that apply to the ::first-line pseudo-element also apply to the ::placeholder pseudo-element, except those defined in [CSS-INLINE-3].
対話的な媒体においては、 仮入力~textは，利用者が入力~欄に手入力し始めたときに隠されることが多い。 しかしながら、 これは要件ではない — 入力~値と仮入力の両~textとも同時に可視にしてもヨイ。 正確な挙動は~UAにより定義されることに注意。 静的な媒体（印刷など）においては、 仮入力~textは，利用者が入力を手入力した後でも呈示することになる。 ◎ In interactive media, placeholder text is often hidden once the user has entered input; however this is not a requirement, and both the input value and the placeholder text may be visible simultaneously. The exact behavior is UA-defined. Note that in static media (such as print) placeholder text will be present even after the user has entered input.
~supportされる~propとして `text-align$p も含めるよう，求めている作者も見受けられる。 例えば、 `ここの~comment＠http://css-tricks.com/almanac/selectors/p/placeholder/$を見よ。 ◎ Authors seem to want text-align on the list of supported properties. See e.g. comments here.
注記： `placeholder$pe は、［ 対応している要素が要素~tree内にある仮入力 ］も指せるようにすることが要請されている。 これがどう働くべきかは明瞭でないが、 そうするに価するかもしれない。 `2517$issue を見よ。 ◎ Note: It’s been requested that ::placeholder also refer to a placeholder which has a corresponding element in the element tree. It’s not clear how this should work, but it may be worth doing. See Issue 2417.
5. 要素が裏にある疑似要素
`要素が裏にある疑似要素@ （ `element-backed pseudo-element^en ）は、 それが本物の要素であったかのように，ほとんどの［ ~CSS, 他の ］~platform特能とヤリトリする （事実、 この疑似要素~以外では選択-可能でない本物の要素`である^emことも多い）。 ◎ The element-backed pseudo-elements, interact with most CSS and other platform features as if they were real elements (and, in fact, often are real elements that are not otherwise selectable).
それらは、 他が指定されない限り — 標準な`~treeに留まる疑似要素$と同じく — 全部的に~style可能†であり，それらの`出自の要素$から継承するが、 代わりに別の要素から継承するものと定義され得る （例えば， `part()$pe は、 それが~shadow~tree内で表現する要素の親から継承する）。 ◎ Unless otherwise specified, they are fully styleable and inherit from their originating element, just like standard tree-abiding pseudo-elements; but they can be defined to inherit from another element instead. (For example, ::part() inherits from the parent of the element it represents in the shadow tree.)
【† `全部的に~style可能な疑似要素$と同じく，すべての~propが適用される — が、 それとは別物として分類される。 】
`要素が裏にある疑似要素$の後には、 構文上は，すべての［ `疑似類$【！~CSS2】, `疑似要素$【！~CSS2】 ］が許容される （ `x-button::part(label):hover^css や `x-button::part(label)::before^css など） — 当の疑似要素は`型~選択子$であったかのように。 ただし、 次に挙げるものは，何かに合致することは決して許容されない： ◎ All pseudo-classes and pseudo-elements are syntactically allowed after an element-backed pseudo-element (such as x-button::part(label):hover or x-button::part(label)::before), just as if the pseudo-element were a type selector; but some are disallowed from matching:
- 次に挙げる疑似類 ⇒＃ `構造上の疑似類$, `has()$ps, `scope$ps, `host$ps, `host()$ps, `host-context()$ps ◎ The structural pseudo-classes, :has() pseudo-class, :scope pseudo-class, and :host/:host()/:host-context() pseudo-classes never match.
- `part()$pe 疑似要素 （しかしながら、 他の，`要素が裏にある疑似要素$は合致し得る。） ◎ ::part() never matches. (Other element-backed pseudo-elements can, however.)
`要素が裏にある疑似要素$は、 本物の要素 （場合によっては、 現在の~treeにおいては~access可能でないもの） を表現しているものとして定義され得る： ◎ An element-backed pseudo-element can define itself as representing a real element (possibly one not accessible in the current tree).＼
- そのように定義された場合、 上に挙げた許容されないもの以外の［ 疑似類, 疑似要素 ］は，いずれも当の本物の要素に合致するときと同じに合致する。 ◎ If it does so, all pseudo-classes and pseudo-elements not otherwise disallowed (see above) match as they would on that real element.＼
- 他の場合、 当の疑似要素は，どの疑似類に, いつ合致するかを定義しなければナラナイ — しかしながら，疑似類のうち［ `~treeに留まる疑似要素$に許容されるもの ］は、 他が指定されない限り，`要素が裏にある疑似要素$にも常に許容される。 ◎ If it does not do so, it must define which pseudo-classes it matches and when; however, unless otherwise specified, any pseudo-classes allowed on tree-abiding pseudo-elements are always allowed on element-backed pseudo-elements.
5.2. `details^e 要素の展開-可能な内容： `details-content^pe 疑似要素
`details-content@pe 疑似要素は、 `details$e 要素~内の開閉可能な追加的な情報を~targetにする。 ◎ The ::details-content pseudo-element targets the additional information in a a details element that can be expanded or collapsed.＼
`details-content$pe 疑似要素は、 `要素が裏にある疑似要素$であり，適用-可能な~propに関する制約は無い。 ◎ It is an element-backed pseudo-element. ◎ There is no restriction on which properties apply to the ::details-content pseudo-element.
例えば，次の例は、 `details$e 要素が開かれたとき， 追加的な情報の不透明度を~animateすることになる： ◎ For example, the following example would animate the opacity of the additional information when the details element opens:
details::details-content {
opacity: 0;
transition: content-visibility 300ms allow-discrete, opacity 300ms;
}
details[open]::details-content {
opacity: 1;
}
6. 重合している疑似要素~間の相互作用
次のことを~~念頭に…： ◎ Recall that
- ［ `before$pe ／ `after$pe ］を成す内容は、 通常の~DOM要素であったかのように選択される。 ◎ the contents of ::before and ::after are selected exactly as if they were normal elements in the document source tree
- `first-letter$pe は、 `整形される最初の行l$上にしか存在できないよう拘束される — それを成す最初の字lに~~後続する~textは、 `first-letter$pe の境界を すき間なく回込む。 ◎ the ::first-letter boundaries are tightly wrapped around the first letter text, and ::first-letter is constrained to exist solely on the first formatted line.
- `first-line$pe の［ 始端は `包含塊$を与える要素の境界のすぐ内側／ 終端は 行l上のすべての内容を閉じた後 ］に挿入される。 ◎ the ::first-line start is inserted just inside the containing block’s element boundary, and its end after the close of all content on the line
…重合している疑似要素がどう相互作用するかを、 次の~CSS, ~HTMLに例示する。 ◎ The following CSS and HTML example illustrates how overlapping pseudo-elements interact:
p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
`interactions-1^xCode
各 `p^e 要素の最初の字lは、 色は `green^v, ~font~sizeは `24pt^v になる。 `整形される最初の行l$を成す残りの部分は `blue^v になり， 段落を成す他の部分は `red^v になる。 ◎ The first letter of each P element will be green with a font size of ’24pt'. The rest of the first formatted line will be blue while the rest of the paragraph will be red.
単語 "~~収まらない" の直前で 行lが分断されるとするとき、 この片に対する`仮想の~tag列$は，次のようになろう： ◎ Assuming that a line break will occur before the word "ends", the fictional tag sequence for this fragment might be:
`interactions-2^xCode7. ~CSS~obj~modelに対する追加
7.1. `CSSPseudoElement^I ~interface
`CSSPseudoElement^I ~interfaceは、 疑似要素も~event~targetになれるようにする。 ◎ The CSSPseudoElement interface allows pseudo-elements to be event targets.
[`Exposed$=Window]
interface `CSSPseudoElement@I : `EventTarget$I {
readonly attribute `CSSOMString$ `type$m;
readonly attribute `Element$I `element$m;
readonly attribute (`Element$I or `CSSPseudoElement$I) `parent$m;
`CSSPseudoElement$I? `pseudo$m(`CSSOMString$ %type);
};
この~interfaceは、 設計~開発の下にあり，実装からの【！than？】~feedbackが~~求まれる。 特に，利用事例と問題について、 ~CSS~WGに~~伝えていただくとありがたい。 ◎ This interface is under design development, and this draft is looking for feedback more than implementation. The CSSWG would particularly appreciate hearing about use cases and problems.
- `type@m
-
疑似要素の型を表現する文字列を返す。 とり得る値は： ◎ The type attribute is a string representing the type of the pseudo-element. This can be one of the following values:
- `::before^l
- `before$pe 疑似要素を表現する。 ◎ Represents the ::before pseudo-element.
- `::after^l
- `after$pe 疑似要素を表現する。 ◎ Represents the ::after pseudo-element.
- `::marker^l
- `marker$pe 疑似要素を表現する。 ◎ Represents the ::marker pseudo-element.
- `element@m
- この`疑似要素$の`最終的な出自の要素$を返す。 ◎ The element attribute is the ultimate originating element of the pseudo-element.
- `parent@m
- この`疑似要素$の`出自の要素$を返す。 ほとんどの疑似要素においては，［ `parent$m, `element$m ］は同じ `Element$I ~objを返すが、 `下位-疑似要素$においては，［ `parent$m は `CSSPseudoElement$I ~obj ／ `element$m は `Element$I ~obj ］を返す。 ◎ The parent attribute is the originating element of the pseudo-element. For most pseudo-elements parent and element will return the same Element; for sub-pseudo-elements, parent will return a CSSPseudoElement while element returns an Element.
- `pseudo(type)@m
- この~methodは、［ %type 引数が参照する`下位-疑似要素$が存在し得る, かつ妥当になる ］ならば，それを表現している `CSSPseudoElement$I ~obj【！~interface】を返す — ~ELSE_ ~NULL を返す。 下の `~pseudoE()$m を見よ。 ◎ The pseudo() method returns the CSSPseudoElement interface representing the sub-pseudo-element referenced in its argument, if such a sub-pseudo-element could exist and would be valid, and null otherwise. See pseudo() below.
注記： この~interfaceは、 将来には拡張され得る — 他の型の疑似要素にまで, および `CSSStyleDeclaration$I の `style^m 属性を通して~style情報を設定できるよう。 現在の機能性は、［ `web-animations-1$r ~supportするために必要なもの ］に制限されている。 ◎ Note: This interface may be extended in the future to other pseudo-element types and/or to allow setting style information through a CSSStyleDeclaration style attribute. The current functionality is limited to that which is needed to support [web-animations-1].
7.2. `Element^I ~interfaceの `pseudo()^m ~method
`Element$I ~interfaceには、 新たな~methodが追加される — それは、 所与の要素により作成された所与の型の疑似要素を検索取得する： ◎ A new method is added to the Element interface to retrieve pseudo-elements created by a given element for a given type:
partial interface `Element$I {
`CSSPseudoElement$I? `~pseudoE$m(`CSSOMString$ %type);
};
- `~pseudoE(type)@m
- この要素を`出自の要素$とする `CSSPseudoElement$I ~instanceのうち［ `type$m が %type に合致しているもの ］を検索取得するために利用される。 ◎ The pseudo(CSSOMString type) method is used to retrieve the CSSPseudoElement instance of the type matching type associated with the element.＼
-
その~method手続きは： ◎ When it is called, execute the following steps:
- %type ~SET %type 引数を `pseudo-element-selector$t の`文法に則って構文解析-$した結果 ◎ Parse the type argument as a <pseudo-element-selector>, and let type be the result.
- ~IF［ %type ~EQ `失敗^i ］ ⇒ ~RET ~NULL ◎ If type is failure, return null.
- ~RET ［ コレを`出自の要素$とする疑似要素のうち，選択子 %type に合致するもの ］を表現している `CSSPseudoElement$I ~obj† ◎ Otherwise, return the CSSPseudoElement object representing the pseudo-element that would match the selector type with this as its originating element.
- 【† そのような疑似要素が実際に生成されていなくとも，それを表現する~objは在ると見なされることになる。 しかしながら、 例えば `::unknown^l が引数に渡されたときも `CSSPseudoElement^I ~objを返すことになるが，その `type$m 属性がとれる値は限られている （関係する詳細は下に挙げる課題に）。 】
- 同じ`出自の要素$上の同じ`疑似要素$を表現するものとして返す値は、 観測-可能になる限り，常に同じ `CSSPseudoElement$I ~objにするモノトスル （観測-可能にならない場合、 ~UAは — 自身の都合や処理能のためとして — この~objを［ 落として／生成し直して ］もヨイ）。 ◎ Return values that represent the same pseudo-element on the same originating element must be, insofar as observable, always the same CSSPseudoElement object. (The UA may drop or regenerate the object for convenience or performance if this is not observable.)
- `~pseudoE()$m ~methodが返す値の［ 同一性, 存続期間, ~NULL性 ］（および，~errorなり得る事例）は、 依然として論の最中にある。 `3607$issue, `3603$issue を見よ。 ◎ The identity, lifetime, and nullness of the return value (and potential error cases) of the pseudo() method is still under discussion. See Issue 3607 and Issue 3603.
7.3. `getComputedStyle()^m
`getComputedStyle()$m は、 2 個目の~parameter %pseudoElt が`強調~疑似要素$を指すときは，［ その強調は作動中で，他のすべての強調は作動中でなかった ］かのようにされた~styleを返す。 実際の強調~状態に依存する結果を返すと、［ 多義性, ~privacy ］の~riskになり得るので。 ◎ When the second parameter pseudoElt refers to a highlight pseudo-element, getComputedStyle() returns styles as if that highlight is active and all other highlights are inactive. This avoids the potential ambiguity and privacy risks of returning a result that depends on the actual highlight state.
8. 互換性~構文
`CSS2$r 向けに書かれた既存の~stylesheetとの互換性を得るため、 ~UAは［ `before$pe ／ `after$pe ／ `first-letter$pe ／ `first-line$pe ］疑似要素~用には，以前の~colon 1 個の記法 （ `before^ps ／ `after^ps ／ `first-letter^ps ／ `first-line^ps ） も受容するモノトスル。 ◎ For compatibility with existing style sheets written against CSS Level 2 [CSS2], user agents must also accept the previous one-colon notation (:before, :after, :first-letter, :first-line) for the ::before, ::after, ::first-letter, and ::first-line pseudo-elements.
~securityの考慮点
強調-法に関しては、 `§ 強調に関する~securityの考慮点＠#highlight-security$ を見よ。 ◎ For highlighting, see § 3.7 Security Considerations for Highlighting.
~privacyの考慮点
この~moduleに対し提起された新たな~privacyの考慮点は、 無い。 ◎ No new privacy considerations have been raised against this module.
変更点
- `2022年 12月 30日 作業草案＠~TR/2022/WD-css-pseudo-4-20221230/$ からの有意な変更点 ◎ Significant changes since the 30 December 2022 Working Draft include:
- ［ `要素が裏にある疑似要素$, `全部的に~style可能な疑似要素$ ］を用語として定義した。 （ `pull #10199＠https://github.com/w3c/csswg-drafts/pull/10199$, `10083$issue ） ◎ Defined element-backed pseudo-element and fully styleable pseudo-element as terms. (Issue 10199, Issue 10083)
- `強調~疑似要素$用の~prop（および~custom~prop）の［ 適用と継承 ］~modelを作業し直した。 （ `7591$issue, `7580$issue, `6641$issue ） ◎ Reworked the property (and custom property) application and inheritance model for highlight pseudo-elements (Issues 7591, 7580, 6641)
- `highlight()$pe を定義した。 `CSS-HIGHLIGHT-API-1$r への相互~参照-法を改善した。 （ `6755$issue ） ◎ Defined ::highlight() and improved cross-referencing to [CSS-HIGHLIGHT-API-1]. (Issue 6755)
- 新たな`強調~疑似要素$として `search-text$pe を追加した。 （ `10212$issue, `10213$issue ） ◎ Added ::search-text as a new highlight pseudo-element. (Issues 10212 and 10213)
- `details-content$pe 疑似要素を追加した。 （ `pull #10379＠https://github.com/w3c/csswg-drafts/pull/10379$ ） ◎ Added ::details-content pseudo-element (Issue 10379)
- `placeholder$pe に適用-可能な~propたちから行内~layout~propを除外した。 （ `5379$issue ） ◎ Excluded inline layout properties from ::placeholder. (Issue 5379)
- ~UAは［ 作者が`強調~疑似要素$用に指定した色 ］を手直ししないモノトスルことを明確化した。 （ `6853$issue ） ◎ Clarified that UAs must not tweak author-specified colors for highlight pseudo-elements. (Issue 6853)
- 【`強調~疑似要素$の】 `color$p の`継承d値$は、 【その`出自の要素$は`根~要素$である場合には】 `初期~値$ではなく `currentcolor$v になることを明確化した。 ◎ Clarified that the inherited value of color is currentColor, not the initial value.
- 2020年 12月 31日 作業草案 からの有意な変更点： ◎ Significant changes since the 31 December 2020 Working Draft include:
- `first-letter$pe `疑似要素$に結付けられる約物に取組むため、 その`下位-疑似要素$として［ `prefix$pe, `postfix$pe ］を追加した。 （ `2040$issue ） ◎ Added ::first-letter::prefix and ::first-letter::postfix sub-pseudo-elements to address punctuation associated with the ::first-letter pseudo-element. (Issue 2040)
-
`最初の字lを成す~text$の~patternを精緻~化した： ◎ Fine-tuned the first-letter text pattern:
- 単語を分離する~spaceを除外した。 （ `5830$issue ） ◎ Excluded word-separating spaces from first-letter text. (Issue 5830)
- `最初の字l$に後続し得る約物から［ `Open Punctuation^uc, `Dash Punctuation^uc ］を除外した。 （ `5830$issue ） ◎ Excluded dashes and opening punctuation from following punctuation. (Issue 5830)
- `最初の字l$を表現するものとして， `Symbol^uc（ `S*^uc ）許容した。 （ `5099$issue ） ◎ Allowed symbols to represent the first letter. (Issue 5099)
- `最初の字lを成す~text$は、 行l分断により切落とされることを明確化した （ `2254$issue ） ◎ Clarified that the first-letter text is truncated by a line break. (Issue 2254)
- `first-letter$pe の定義を書き直して明確化した。 例と注記を改善した。 ◎ Rewrote and clarified definition of :first-letter, and improved examples and notes.
- `first-line$pe の定義を書き直して，明確化した。 例を改善した。 ◎ Rewrote and clarified definition of ::first-line, and improved examples.
- `first-line$pe に対する `line-height$p の適用を定義した。 （ `2282$issue ） ◎ Defined application of line-height to ::first-line. (Issue 2282)
- `first-line$pe と `first-letter$pe の~box構造に関する相互作用を定義した。 ◎ Defined box structure interaction of ::first-line and ::first-letter.
- `first-line$pe と`根~行内~box$の階層~順序を定義した。 （ `1384$issue ） ◎ Defined hierarchy order of ::first-line and the root inline box. (Issue 1384)
- `強調~疑似要素$の［ `color$p, `background-color$p ］用の`~pairにされた既定＠#paired-defaults$挙動を明確化した。 （ `6386$issue, `6774$issue, `6779$issue, `7837$issue ） ◎ Clarified paired default behavior of highlight pseudo-element color and background-color. (Issue 6386, Issue 6774, Issue 6779, Issue 7837)
- `強調~疑似要素$に対する`強制d色~mode$の適用を定義した。 （ `7264$issue ） ◎ Defined application of forced colors mode to highlight pseudo-elements. (Issue 7264)
- `強調~疑似要素$による各種~text装飾の［ 塗ng順序, 伝播, 適用 ］を明確化した。 （ `6022$issue, `6829$issue, `7101$issue ） ◎ Clarified painting order, propagation, and application of highlight pseudo-element text decorations. (Issue 6022, Issue 6829, Issue 7101)
- `強調~疑似要素$に適用される~propの~listから［ `caret-color$p, `cursor$p ］を除去した。 （ `4100$issue ） ◎ Removed caret-color and cursor from applying to highlight pseudo-elements. (Issue 4100)
- `強調~疑似要素$と `getComputedStyle()$m の相互作用を明確化した。 （ `6818$issue ） ◎ Clarified interaction of highlight pseudo-elements and getComputedStyle(). (Issue 6818)
- `疑似要素$に対する`~custom~prop$の適用を明確化した。 （ `6264$issue ） ◎ Clarified application of custom properties to pseudo-elements. (Issue 6264)
- `下位-疑似要素$に取組むため、 `CSSPseudoElement$I ~interfaceを［ `parent$m 属性, `pseudo()$m ~method ］で拡張した。 （ `3836$issue ） ◎ Extended the CSSPseudoElement interface with a parent attribute and pseudo() method to address sub-pseudo-elements. (Issue 3836)
- `2019年 2月 25日 作業草案＠~TR/2019/WD-css-pseudo-4-20190225/$ からの有意な変更点 ◎ Significant changes since the 25 February 2019 Working Draft include:
- `target-text$pe 疑似要素を追加した。 （ `5522$issue ） ◎ Added ::target-text pseudo-element. (Issue 5522)
- `inactive-selection^pe 疑似要素を除去した。 （ `4579$issue ） ◎ Removed ::inactive-selection. (Issue 4579)
- `file-selector-button$pe【！file-selectors-button】 疑似要素を追加した。 （ `5049$issue ） ◎ Added ::file-selectors-button pseudo-element. (Issue 5049)
- ［ 継承-可能, 継承-不能 ］な~propの取扱いを違えるため、 `first-line$pe から~propを継承するときの規則を調整した — 特定的に，`書字~mode$を制御する~propの適用能は、 ~cascadeに影響するので除外される。 加えて，~custom~propとの相互作用も定義した。 （ `1097$issue ） ◎ Adjusted rules for inheritance of properties from ::first-line to handle inheritable vs non-inheritable properties differently, specifically excluded applicability of properties that control writing mode because they affect the cascade, and defined interaction with custom properties. (Issue 1097)
- `first-line$pe に許容される~propとして — `text-emphasis-position$p と相似的になるよう — `ruby-position$p を追加した。 （ `2998$issue ） ◎ Added ruby-position to properties allowed on ::first-line, analogous with text-emphasis-position. (Issue 2998)
- `first-letter$pe における最初の字lは、 前後の約物との合間にある~spaceも含めるようにした。 （ `5154$issue ） ◎ Included spaces between the first letter and its surrounding punctuation in ::first-letter. (Issue 5154)
- `marker$pe と `first-letter$pe の相互作用を定義した。 ◎ Defined interaction of ::marker and ::first-letter.
- ［ `::before::marker^css, `::after::marker^css ］は、 妥当になるようにした。 （ `1793$issue ） ◎ Made ::before::marker and ::after::marker valid. (Issue 1793)
- `marker$pe に適用される`~propの~list＠~CSSWG/css-lists-3/#marker-properties$を `CSS-LISTS-3$r に移動した（それに伴い，［ `content$p, `unicode-bidi$p, `direction$p ］も追加した）。 ◎ Moved the list of properties applying to ::marker to [CSS-LISTS-3] (also adding content, unicode-bidi, and direction).
- `CSSPseudoElement$I ~interface用に許容される型として `marker$pe を追加した。 （ `3763$issue ） ◎ Added ::marker to types allowed for CSSPseudoElement interface. (Issue 3763)
- `pseudo()$m が返す値を明確化した。 （ `3603$issue, `3607$issue ） ◎ Clarified return value of pseudo(). (Issues 3603 and 3607)
- `行内~levelの~box$の`強調~overlay$は、 `行l~box$の辺まで拡張することを許容した。 （ `5395$issue, `4624$issue ） ◎ Allowed highlight overlay of inline-level boxes to extend to the line box edges. (Issues 5395 and 4624)
- `強調~疑似要素$に対する `currentcolor$v は、［ ~textは “強調されなかった” としたとき，利用されることになる色 ］を利用することを明確化した — `first-line$pe の様な疑似要素により供された色であっても。 （ `4625$issue ） ◎ Clarified that currentColor on a highlight pseudo-element uses the color that would be used if the text were not “highlighted”, even if that color was provided by a pseudo-element like ::first-line. (Issue 4625)
- `text-shadow$p が`強調~疑似要素$とどう相互作用するか定義した。 （ `3932$issue ） ◎ Defined how text-shadow interacts with highlight pseudo-elements. (Issue 3932)
- 強調~疑似要素に適用される［ `既定の~UA~stylesheet＠#highlight-ua-styles$内の規則 ］を改善した。 ◎ Improved the default UA style sheet rules applying to highlight pseudo-elements.
- `2016 年 6月 7日 作業草案＠~TR/2016/WD-css-pseudo-4-20160607/$ からの変更点 ◎ Changes since the 7 June 2016 Working Draft include:
- ~UA~stylesheetにて，［ `spelling-error$pe ／ `grammar-error$pe ］に［ `spelling-error$v ／ `grammar-error$v ］を指定した。 ◎ Specified spelling-error and grammar-error with ::spelling-error and ::grammar-error in the UA stylesheet.
- 親, 子の強調~疑似要素の間の値の伝播を，~cascade法ではなく継承を利用するよう定義し直した。 `2474$issue, そこからの~linkにおける論点を見よ。 ◎ Redefined value propagation between parent/child highlight pseudo-elements to use inheritance rather than cascading. See discussion in and linked from Issue 2474.
- 強調~疑似要素 用に~supportされる~propの~listを精緻化した — 例： `stroke-color$p, `fill-color$p を追加して， `outline$p を除去した, 等々。 ◎ Refined list of supported properties for highlight pseudo-elements, e.g. adding stroke-color/fill-color, removing outline, etc.
- 強調~疑似要素 用の［ ~text, ~text装飾 ］の色がどう塗られるかを，明確化した。 ◎ Clarified how text and text decoration colors are painted for highlight pseudo-elements.
- `CSSPseudoElement$I ~interfaceに `element$m 属性を追加した。 ◎ Added the element attribute to the CSSPseudoElement interface.
- `CSSPseudoElement$I ~interface上の `type$m 属性がとる値たちを，対応する疑似要素に合致するように変更した。 ◎ Changed the values of the type attribute on the CSSPseudoElement interface to match the corresponding pseudo-elements.
- ~supportされる `CSSPseudoElement$I の型を抑制し、 実装されてない `style^m 属性は除去した。 ◎ Reduced supported types of CSSPseudoElement and removed unimplemented style attribute.
- `window.getPseudoElements(elem,type)^m を `Element.pseudo(type)^m に変更した。 ◎ Changed window.getPseudoElements(elem,type) to Element.pseudo(type).
- 諸々の小さな明確化と修正点。 ◎ Miscellaneous minor clarifications and fixes.
謝辞
この仕様に貢献された次の方々に： ◎ The editors would like to specifically thank the following individuals for their contributions to this specification:＼
Tab Atkins, David Baron, Oriol Brufau, Razvan Caliman, Chris Coyier, Anders Grimsrud, Vincent Hardy, François Remy.