1. 序論
これは、 `~level 4$ に対する差分~仕様である。 ◎ This is a diff spec against Selectors Level 4.
1.1. ~module間の相互作用
この~moduleは、［ `~level 4$ において~CSS用に定義された`選択子$ ］たちが成す集合を拡張する。 ◎ This module extends the set of selectors defined for CSS in [selectors-4].
2. 所在~疑似類
2.1. 局所~link： `local-link^ps 疑似類
`local-link@ps 疑似類は、 `~hyperlink＠~SELECTORS4#the-any-link-pseudo$たちの~styleを［ ~siteの中での利用者の現在の所在に基づくようにすること, ~site内部な~linkと~site外部な~linkで違えること ］を作者に許容する。 ◎ The :local-link pseudo-class allows authors to style hyperlinks based on the users current location within a site and to differentiate site-internal versus site-external links.
（関数形でない） `local-link$ps 疑似類は、 ~hyperlinkの~source~anchor 【 `any-link$ps に合致する要素】のうち［ その~target~URL — 要素の~hyperlinkの~targetの絶対~URL — は，現在の~URL — 要素が属する文書の~URL — に合致するもの ］を表現する。 これらの~URLどうしを照合する際には、 ~target~URLの素片~識別子は剥がされる — 他の部位は、 すべて考慮される。 ◎ The (non-functional) :local-link pseudo-class represents an element that is the source anchor of a hyperlink whose target’s absolute URL matches the element’s own document URL. Any fragment identifiers are stripped before matching the document’s URL against the link’s URL; otherwise all portions of the URL are considered.
【 より厳密には、 次の~algoが ~T を返すとき合致するであろう： 】
- %要素 ~LET 当の要素
- ~IF［ %要素 は［ `文書~言語$に定義されるとおり~hyperlinkを作成するもの ］ではない ］ ⇒ ~RET ~F
- %~URL文字列 ~LET %要素 が作成する~hyperlinkの~targetとして指定された~URL
- %文書 ~LET %要素 の`~node文書$
- %~target~URL ~SET `~URLを相対的に構文解析する$( %~URL文字列, %文書 ) （~HTML以外においては、 `文書~言語$により定義される等価な~algo）
- ~IF［ %~target~URL ~EQ `失敗^i ］ ⇒ ~RET ~F
- ~RET ~IS［ ( %文書 の`~URL$doc, %~target~URL ) は、 `素片を除外する^i 下で`同等な~URL$である ］
例えば，次の規則は、 現在の~pageを~targetにしている~linkが~navi~list `nav^e の一部を成すときに， 下線が引かれないようにする： ◎ For example, the following rule prevents links targeting the current page from being underlined when they are part of the navigation list:
nav :local-link { text-decoration: none; }
その関数-形 `local-link()@ps 疑似類は、 その唯一の引数として負でない整数を受容する — それは、 当の文書の~URLが階層的な~schemeに属する†場合、 合致する~path~levelの個数を指示する： ◎ As a functional pseudo-class, :local-link() can also accept a non-negative integer as its sole argument, which, if the document’s URL belongs to a hierarchical scheme, indicates the number of path levels to match:
【† “階層的な~schemeに属する” が，どう定義されるのかは不明。 本当は、 文書の`~URL$docの`~path$urlは`不透明な~path$でないことを意味すると思われる （それは、 ~URLの~schemeとは無関係な概念であるが）。 】
- `:local-link(0)^css は、 ~hyperlinkの~source~anchor【！link element】のうち， その~target~URLが当の文書の~URLと同じ生成元【`同一-生成元$】であるものを表現する。 ◎ :local-link(0) represents a link element whose target is in the same origin as the document’s URL
- `:local-link(1)^css は、 `:local-link(0)^css が表現する要素のうち，その~target~URLは 1 個目の~path区分を有するものを表現する。 ◎ :local-link(1) represents a link element whose target has the same origin and first path segment
- `:local-link(2)^css は、 `:local-link(1)^css が表現する要素のうち，その~target~URLは 2 個目の~path区分を有するものを表現する。 ◎ :local-link(2) represents a link element whose target has the same origin, first, and second path segments
- 等々 ◎ etc.
【 “%n 個目の~path区分を有する” がどう定義されるかは不明。 ［ `~path$urlの~size ~GTE %n ］に加えて［ `~path$url[ %n ~MINUS 1 ] ~NEQ 空~文字列 ］も要求されるかもしれない。 】
次の例は、 ~site外部な~linkすべてを破線な（ `dashed^v ）下線で~styleする。 ◎ The following example styles all site-external links with a dashed underline.
:not(:local-link(0)) { text-decoration-style: dashed; }
~path区分は、 `002F^U により分離された当の~URLの~pathを成す部位たちである。 当の文書の~URLに~path区分は欠落な場合、［ 合致するために そのような区分を要求している疑似類 ］†に合致するものは無い。 ◎ Path segments are portions of the URL’s path that are separated by forward slashes (/). If a segment is missing from the document’s URL, a pseudo-class requiring that segment to match does not match anything.
【† すなわち `local-link()$ps （なぜこのように間接的な言い回しになっているのかは不明）。 】
なので、 次に挙げる選択子に対しては：
- (*) `local-link^css
- (0) `local-link(0)^css
- (1) `local-link(1)^css
- (2) `local-link(2)^css
- (3) `local-link(3)^css
- (4) `local-link(4)^css
当の文書の~URLは `http://www.example.com/2011/03/^c ならば、 当の文書~内の［ 次の表tの 1 列目に挙げる~target~URLを作成する~hyperlink ］は， 2 列目に挙げる選択子に合致する：
| ~target~URL | 合致するもの |
|---|---|
| `http://www.example.com^c | (0) |
| `http://www.example.com/2011^c | (0), (1) |
| `http://www.example.com/2011/03^c | (0), (1), (2) |
| `http://www.example.com/2011/03/^c | (*), (0), (1), (2), (3) 【 (0), (1), (2), (3) ？】 |
| `http://www.example.com/2011/03/21^c | (0), (1), (2) 【 (*), (0), (1), (2), (3)？】 |
| `https://www.example.com/2011/03/^c | なし |
| `http://example.com/2011/03/^c | なし |
(4) に合致するものは、 無い。
◎ So, given the links: • <a href="http://www.example.com">Home</a> • <a href="http://www.example.com/2011">2011</a> • <a href="http://www.example.com/2011/03">March</a> • <a href="http://www.example.com/2011/03/">March</a> • <a href="http://www.example.com/2011/03/21">21 March</a> • <a href="https://www.example.com/2011/03/">March</a> • <a href="http://example.com/2011/03/">March</a> ◎ and the styles: • a:local-link {...} • a:local-link(0) {...} • a:local-link(1) {...} • a:local-link(2) {...} • a:local-link(3) {...} • a:local-link(4) {...} ◎ If the document’s URL is http://www.example.com/2011/03/: • Link 1 would receive Style B • Link 2 would receive Styles B and C • Link 3 would receive Styles B, C, and D • Link 4 would also receive Styles A, B, C, D, and E • Link 5 would receive Styles B, C, and D • Link 6 would remain unstyled • Link 7 would remain unstyled • Style F would not be applied to anything~URLの生成元は、 `RFC 6454 § ~URLの生成元＠~RFC6454#section-4$ により定義される。 当の~URLを成す部位のうち［ ~username, ~password, ~query文字列, 素片 ］は、 `local-link()$ps に対し照合するときには考慮されない。 当の文書の~URLが階層的な~schemeに属さない場合、 この関数形~疑似類には合致しない。 ◎ The "origin" of the URL is defined by RFC 6454, Section 4. The username, password, query string, and fragment portions of the URL are not considered when matching against :local-link(n). If the document’s URL does not belong to a hierarchical scheme, the functional pseudo-class matches nothing.
当の文書~URLが %N 個以上の~path区分を有する場合、 `:local-link(%N)^css に合致する~linkは， その~URLが %N 個以上の~path区分を有するものに限られることは明瞭である （これは、 `local-link^ps に一貫した意味論をアテガえるようにする — 例えば `:local-link(2)^css は、 `"within-repo" link on GitHub^en を意味するよう）。 当の文書~URLが有する~path区分が %N 個~未満で， 当の~linkは同一-~page内にある場合、 “~NULL 区分” 【？】を照合するものとして数えるべきか否か？ ◎ It’s clear that, if the document URL has at least N segments, then :local-link(N) only matches links whose URL has at least N segments. (This lets you assign consistent semantics to :local-link so that, for example, :local-link(2) means a "within-repo" link on GitHub.) What about if the document url has less than N segments, and the link is same-page? Should "null segments" count as matching, or not?
3. 利用者~動作 疑似類
3.1. 関心 疑似類: `interest-source^ps, `interest-target^ps
利用者~向けの共通的な~UI特能として、 ある種の要素 — `関心~source@ — に “関心を示した” とき， 別の要素（概して，~popup） — `関心~target@ — において追加的な情報を示す~UIにより応答する能がある。 例えば、 ~page上の~usernameに~hoverすると情報~票が~~現れたり， ~linkを長押しすると~linkの行先を成す~previewが~~現れるような。 これが起きたときは、 最初の要素…【以下，原文は途切れている。】 ◎ A common UI feature is the ability for the user to "show interest" in certain elements (an interest source), and the UI to respond to that interest by showing additional information in another element (the interest target), typically a popup. For example, hovering a username on a page might bring up an information card for that user; or long-pressing a link might bring up a preview of the link’s destination. Whenever this happens, the first element
注記： 正確に［ どの要素に`関心~source$になる能力があるか, それらが`関心~target$へどう~linkされるか, “関心” がどう示されるか ］は、 いずれも`~host言語$により定義される。 例えば，~HTMLにおいては、 要素に “関心を示す” 能力があることは， `interestfor^a 属性が指示する （当の要素は`関心~source$になり、 当の属性の値は，それに結付けられた`関心~target$ — 追加的な情報を示すよう意図される別の要素（通例的には，ある`~popover要素$） — を指す）。 ◎ Note: Exactly what elements are capable of being interest sources, how they’re linked to interest targets, and how "interest" is shown are all host language-defined. In HTML, for example, this is done with the interestfor attribute to indicate an element capable of "showing interest" (being an interest source, and that attribute points to another element intended to show the additional information (the associated interest target) (usually a popover element).
【 `interestfor^a 内容~属性は、 まだ仕様~化されていない （`参照＠~HTMLissue/10309$）。 】
`interest-source@ps 疑似類は、 利用者が現在 “関心を示して” いる`関心~source$に合致する【！適用される】。 ◎ The :interest-source pseudo-class applies to an interest source element that the user is currently "showing interest" in,＼
`interest-target@ps 疑似類は、 `interest-source$ps に合致している要素に結付けられた`関心~target$に合致する【！適用される】。 ◎ and the :interest-target pseudo-class applies to the associated interest target of an element matching :interest-source.
注記： `interest-source$ps に合致する`関心~source$は、 利用者が`現在^em 関心を示しているものに限られる — 関心を示すように`なり得るもの^emすべてではなく。 例えば，~HTMLにおいては、 要素が この疑似類に合致するためには、 `interestfor^a 属性を有しているのみならず， 利用者が実際に関心を指示している必要もある。 類似に， `interest-target$ps に合致する`関心~target$は、 それに~linkしている要素に利用者が`現在^em 関心を向けているものに限られる — `interestfor^a 属性により指されたものすべてではなく。 ◎ Note: :interest-source only matches an interest source the user is currently interested in, not any element that can potentially have interest shown in it. In HTML, for example, just having the interestfor attribute does not make an element match this pseudo-class; the user has to actually indicate interest in it too. Similarly, :interest-target only matches an interest target that is linked to an element the user is currently interested in, not any element pointed to by an interestfor attribute.
4. 入力 疑似類
4.1. 入力~値の検査-法
4.1.1. 空な値： `blank^ps 疑似類
`blank@ps 疑似類は、 利用者~入力~要素のうち，入力~値は空であるもの （入力が空~文字列あるいは “無い” もの） に適用される。 ◎ The :blank pseudo-class applies to user-input elements whose input value is empty (consists of the empty string or otherwise null input).
注記： 大雑把に言えば、 ヒトが印刷された~formを見て空欄と~~認識する場合， それは `blank$ps に合致する。 ◎ Roughly speaking, if a human looked at a printout of the form and would say it’s blank, it matches :blank.
~form~controlに対し `blank$ps を解釈する~~経験則として，次が挙げられる： ◎ A rule of thumb for interpreting :blank on form controls is:
- 当の~controlは 常に提出されるものであって， 空~文字列を伴って提出されることになる場合、 `blank$ps に合致する。 （例：~HTMLにおける［ `Text$st 状態にある `input$e 要素 ］のうち，その値が空なもの。） ◎ If the control always submits, and would do so with an empty string, it matches :blank. (Such as HTML’s <input type=text> when its value is empty.)
- 当の~controlは ときには提出されるものであって， 提出しないよう設定されている場合、 `blank$ps に合致する。 （例：~HTMLにおける［ `Checkbox$st 状態にある `input$e 要素 ］のうち，~check有りでないもの。） ◎ If it sometimes submits, and is set to not submit, it matches :blank. (Such as HTML’s <input type=checkbox> when not checked.)
- 当の~controlは “動作~button” である場合 （状態を表現する “~toggle~button” ではなく）、 `blank$ps には決して合致しない （例： `button$e 要素, `Submit$st 状態にある `input$e 要素, 等々）。 ◎ If it’s an “action button” (rather than a “toggle button” that represents a state) such as <button>, <input type=submit>, etc., it never matches :blank.
`~host言語$は、 各種~form~controlが いつ `blank$ps 合致するかについて， もっと精確な規則を指定し得る。 ◎ Host languages can specify more precise rules for when form controls match :blank.
5. 時間~次元な疑似類
この節に挙げる疑似類は、［ 現在~表示-中かどうか, あるいは何らかの時列線における作動中な~~期間 ］に基づいて，要素を分類する。 文書を発話として具現化するときや， ~WebVTTを利用して動画を表示する間に字幕を描画するなどの用途がある。 ◎ These pseudo-classes classify elements with respect to the currently-displayed or active position in some timeline, such as during speech rendering of a document, or during the display of a video using WebVTT to render subtitles.
~CSSは、 この時列線を定義しない。 それは`~host言語$が定義しなければナラナイ。 これらの疑似類は、 時列線が定義されていない要素には合致しないモノトスル。 ◎ CSS does not define this timeline; the host language must do so. If there is no timeline defined for an element, these pseudo-classes must not match the element.
注記： `current$ps 要素の先祖もまた `current$ps になるが、 `future$ps 要素の先祖も `future$ps になるとは限らない。 所与の要素は、 少なくとも［ `current$ps, `past$ps, `future$ps ］のうちいずれかに合致する。 ◎ Note: Ancestors of a :current element are also :current, but ancestors of a :past or :future element are not necessarily :past or :future as well. A given element matches at most one of :current, :past, or :future.
5.1. 現在-要素： `current^ps 疑似類
`current@ps 疑似類は、 現在~表示されている要素または【および？】その先祖である要素を表現する。 ◎ The :current pseudo-class represents the element, or an ancestor of the element, that is currently being displayed.
その関数-形 `current()@ps 疑似類は、 `複合-選択子$たちが`成す~list$を引数にとる。 これは、 %E を `current$ps 要素†とするとき， %E が引数にも合致するならば %E 自身を表現する — 合致しない場合、［ %E の先祖であって, 引数に合致する要素のうち %E に最も近い先祖 ］を表現する （どれにも合致しない場合は何も表現しない）。 ◎ Its alternate form :current() takes a list of compound selectors as its argument: it represents the :current element that matches the argument or, if that does not match, the innermost ancestor of the :current element that does. (If neither the :current element nor its ancestors match the argument, then the selector does not represent anything.)
【† `current^ps に合致する要素 — 以下の各節でも同様。 】
例えば，次の規則は、 文書を発話として具現化するときに，読み上げられる段落, または~list~itemを強調することになる： ◎ For example, the following rule will highlight whichever paragraph or list item is being read aloud in a speech rendering of the document:
:current(p, li, dt, dd) {
background: yellow;
}
5.2. 過去-要素： `past^ps 疑似類
`past@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素~全体が `current$ps 要素より先に生じるものと定義されているもの。 例えば、 ~WebVTT仕様は， `past$ps 疑似類を 【！http://dev.w3.org/html5/webvtt/】 `~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。 ◎ The :past pseudo-class represents any element that is defined to occur entirely prior to a :current element.＼ For example, the WebVTT spec defines the :past pseudo-class relative to the current playback position of a media element.＼
`文書~言語$により要素どうしの時間に基づく順序が定義されていない場合、 これは `current$ps 要素に先行するすべての同胞~要素を表現する。 ◎ If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) previous sibling of a :current element.
5.3. 未来-要素： `future^ps 疑似類
`future@ps 疑似類は、 次に該当する要素を表現する ⇒ 要素~全体が `current$ps 要素より後に生じるものと定義されているもの。 例えば、 ~WebVTT仕様は， `future$ps 疑似類を `~media要素の現在の再生~位置に相対的＠https://w3c.github.io/webvtt/#the-past-and-future-pseudo-classes$であるものと定義する。 ◎ The :future pseudo-class represents any element that is defined to occur entirely after a :current element.＼ For example, the WebVTT spec defines the :future pseudo-class relative to the current playback position of a media element.＼
`文書~言語$により要素どうしの時間に基づく順序が定義されていない場合、 これは `current$ps 要素に後続するすべての同胞~要素を表現する。 ◎ If a time-based order of elements is not defined by the document language, then this represents any element that is a (possibly indirect) next sibling of a :current element.
6. ~custom状態の公開-法： `state()^ps 疑似類
`state()@ps は、 `ident$t を引数にとる関数形~疑似類であり， 【~HTMLにおいては，】 次を満たす`~custom要素$ %要素 に合致する ⇒ 当の選択子の引数に与えられた文字列 ~IN %要素 の`状態~集合$【の`~set~entry群$】 ◎ The :state( <ident> ) pseudo-class matches custom elements whose states set contains a string that is the selector’s argument’s value.
注記： 文字列は`文字大小区別で比較される＠~INFRA#string-is$ので、 `状態~集合$内に `foo^l が在っても， `:state(FOO)^css は`合致しない^emことになる。 ◎ Note: The "is" matching behavior compares strings by codepoint; notably, it’s case-sensitive. So if "foo" is in the states set, :state(FOO) will not match.
`state()$ps 疑似類を照合するための正確な挙動は、 `~host言語$により定義される。 この疑似類を説明している概念は、 明確さを得るため，~HTMLによる定義へ~linkしているが。 他の`~host言語$は、 この疑似類が何にどう合致するかを定義しなければナラナイ。 ◎ The exact matching behavior of :state() pseudo-class is defined by the host language. For clarity, the concepts explaining this pseudo-class link to the HTML definition; see HTML’s definition for more detail. Other host languages must define how this pseudo-class matches.
7. 見出し構造： `heading^ps, `heading()^ps 疑似類
`heading@ps 疑似類は、［ `文書~言語$により定義される意味論により，見出し~levelを有するものと定義される要素 ］に合致する — 例： `HTML$r【！`HTML5$r】 における`見出し~level$。 ◎ The (non-functional) :heading pseudo-class matches an element which has a heading level, with respect to the semantics defined by the document language (e.g. [HTML5]).
`heading$ps の`詳細度$は、 【通常の疑似類と同じく】`~class選択子$と同じである。 ◎ The specificity of :heading is that of a class.
例えば，次の~stylesheetは、 現在の~page内のすべての見出し要素に適用される規則を包含する： ◎ For example, the following sheet contains a rule applying to all heading elements in the current page:
:heading { text-decoration: underline; }
その関数-形 `heading()@ps 疑似類は、［ 引数に供されたいずれかの整数~値に合致している見出し~level ］を有する要素を表現する。 その構文は： ◎ As a functional pseudo-class, :heading() notation represents elements that have a heading level among matching any of the provided integer values. The syntax is:
:heading() = :heading( `level$t# )
`level@t は、 次を満たす `number-token$t である ⇒ その.型~flag ~EQ `整数^i ◎ where <level> is a <number-token> with its type flag set to "integer".
`heading()$ps の`詳細度$は、 【通常の疑似類と同じく】`~class選択子$と同じである。 ◎ The specificity of :heading() is that of a class.
`:heading(2, 4, 6)^css は、 見出し~levelを有していて, それが［ 2, 4, 6 ］いずれかに等しいならば合致する。 ◎ The following example styles headings with levels between 1 and 3 with a font-weight of 900, while headings with levels 6 onward with font-weight of 500, additionally heading levels 1 and 2 will be underlined, while 3 and beyond will have no text-decoration: • :heading(1, 2, 3) { font-weight: 900; } • :heading(6, 7, 8, 9) { font-weight: 500; } • :heading(1, 2) { text-decoration: underline; } • :heading(3, 4, 5, 6, 7, 8, 9) { text-decoration: none; }
注記： 要素の`見出し~level$は、 要素~型が表すそれ【！`型~選択子$】と同じになるとは限らない。 例えば，選択子 `h1:heading(3)^css は、 `h1^e 要素のうち，見出し~levelとして 3 を公開したものに合致する。 ◎ Note: The heading level might be different from an element’s type selector. Thus, a selector h1:heading(3) matches any h1 tag which has an exposed heading level of 3.
8. 格子~構造な選択子
2 次元な格子~内の~cellの（その~row【 “行” 】と~col【 “列” 】への）二重の所属関係は、 階層的~markup言語における親子~関係性では，一方しか表現し得ない — もう一方への所属関係は、 `文書~言語$の意味論において明示的または暗黙的に定義されなければナラナイ。 2 つの最も共通的な階層的~markup言語 — ~HTML, DocBook — は，どちらも~markupは~row主導であり （すなわち，~rowへの所属関係が階層的に表現される）、 ~colについては暗黙に与えられなければナラナイ。 その種の~colへの暗黙な所属関係を表現-可能にするため、 `~col結合子$，および［ `nth-col()$ps , `nth-last-col()$ps ］疑似類が定義される。 ~col主導な`文書~言語$においては、 これらの疑似類は，~rowへの所属関係に合致する†。 ◎ The double-association of a cell in a 2D grid (to its row and column) cannot be represented by parentage in a hierarchical markup language. Only one of those associations can be represented hierarchically: the other must be explicitly or implicitly defined in the document language semantics. In both HTML and DocBook, two of the most common hierarchical markup languages, the markup is row-primary (that is, the row associations are represented hierarchically); the columns must be implied. To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined. In a column-primary format, these pseudo-classes match against row associations instead.
【† 以下の記述に現れる “~col” は、 `文書~言語$が~row主導であるものと見做している。 ~col主導な`文書~言語$においては，~rowを表現するものと見做す必要がある。 】
8.1. ~col結合子（ `||^css ）
`~col結合子@ （ `column combinator^en ）は、 ~col要素†が表現する~colへの~cell要素の所属関係を表現し， 2 個の `007C^U が成す並び — `||@css — で記される。 ~colへの所属は，`文書~言語$の意味論のみに基づいて決定される — 要素が呈示されるかどうかや, どう呈示されるかを問わず。 複数の~colに属する~cell要素は、 それらどの~colへの所属を指示する選択子でも，表現される。 ◎ The column combinator, which consists of two pipes (||) represents the relationship of a column element to a cell element belonging to the column it represents. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating membership in any of those columns.
【† ［ ~row／~col ］主導な階層的~markup言語の下で［ ~col／~row ］を指示する要素 （例：~HTMLにおいては `col^e 要素）。 `文書~言語$が そのような要素を定義しない場合、 何らかの疑似要素で表現-可能にしない限り， 利用し得ないことになる。 】
次の例では、 ~cell C, E, G に~styleが適用される。 ◎ The following example makes cells C, E, and G gray.
col.selected || td {
background: gray;
color: white;
font-weight: bold;
}
<table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table>
8.2. `nth-col()^ps 疑似類
`nth-col(~AnB)@ps 疑似類は、 ~cell要素のうち［ 互いに同胞な~colのうち~AnBthの~colに属するもの ］を表現する。 ~colへの所属の定義は、 `~col結合子$を見よ。 ◎ The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns.
`~AnB$ 記法は、 `CSS3SYN$r にて定義される。 ◎ The CSS Syntax Module [CSS3SYN] defines the An+B notation.
8.3. `nth-last-col()^ps 疑似類
`nth-last-col(~AnB)@ps 疑似類は、 ~cell要素のうち［ 互いに同胞な~colのうち最後から~AnBthの~colに属する~cell要素 ］を表現する。 ~colへの所属の定義は、 `~col結合子$を見よ。 ◎ The :nth-last-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns.
`~AnB$ 記法は、 `CSS3SYN$r にて定義される。 ◎ The CSS Syntax Module [CSS3SYN] defines the An+B notation.
9. 結合子
9.1. 参照~結合子 `/%ref/^css
`参照~結合子@ は、 2 個の `002F^U に挟まれた`~CSS有修飾~名$ — 例： `/%attr/^css 【 %attr が当の名前】 — として記される`結合子$である。 その関係性は、 `~host言語$により他が指定されない限り，当の結合子の［ 直前, 直後 ］の`複合-選択子$により表現される要素［ %A, %B ］に対し［ %A は %attr を介して %B を明示的に参照している ］こと — %A は［ %attr と命名された属性 ］を有していて， %B は［ 当の属性の値を識別子に伴う`~ID選択子$ ］に合致すること — として定義される。 ◎ The reference combinator consists of two slashes with an intervening CSS qualified name, and separates two compound selectors, e.g. A /attr/ B. The element represented by the first compound selector explicitly references the element represented by the second compound selector. Unless the host language defines a different syntax for expressing this relationship, this relationship is considered to exist if the value of the specified attribute on the first element is an IDREF or an ID selector referencing the second element.
`参照~結合子$用の属性の照合は、 `属性~選択子$用のものと同じ規則に従う。 【どの規則？】 ◎ Attribute matching for reference combinators follow the same rules as for attribute selectors.
次の例は、 ある `input$e 要素を`~label先~control$とする `label$e 要素が~focusされるか~hoverされたとき，当の `input^e 要素を強調する： ◎ The following example highlights an input element when its <label> is focused or hovered-over:
label:is(:hover, :focus) /for/ input, /* `for^a 属性による結付け ◎ association by "for" attribute */ label:is(:hover, :focus):not([for]) input { /* 包含関係による結付け ◎ association by containment */ box-shadow: yellow 0 0 10px; }
変更点
- `~level 4$ からの変更点 ◎ 10.1. Changes Since Level 4
-
次に挙げるものを追加した： ◎ Additions since Level 4:
- `参照~結合子$ （~level 4 の `2013年 5月 2日 作業草案＠~TR/2013/WD-selectors4-20130502/$から先送りされた） ◎ Reference combinators (deferred from an earlier draft of Selectors 4)
- `local-link$ps 疑似類 （~level 4 の `2013年 5月 2日 作業草案＠~TR/2013/WD-selectors4-20130502/$ から先送りされた） ◎ The functional form of the :local-link pseudo-class (deferred from an earlier draft of Selectors 4)
- `state()$ps 疑似類 ◎ The :state() pseudo-class
- `heading$ps 疑似類 ◎ The :heading and＼
- `heading()$ps 疑似類 ◎ :heading() pseudo-classes
- `local-link$ps 疑似類 （~level 4 の `2022年 11月 11日 作業草案＠~TR/2022/WD-selectors-4-20221111/$ から先送りされた） ◎ The :local-link pseudo-class (deferred from an earlier draft of Selectors 4)
- `interest-source$ps 疑似類 ◎ The :interest-source and＼
- `interest-target$ps 疑似類 ◎ :interest-target pseudo-classes
- `blank$ps 疑似類 （~level 4 の `2022年 11月 11日 作業草案＠~TR/2022/WD-selectors-4-20221111/$ から先送りされた） ◎ The :blank pseudo-class (deferred from an earlier draft of Selectors 4)
- `格子~構造な選択子＠#grid-structural-selectors$ （~level 4 の `2022年 11月 11日 作業草案＠~TR/2022/WD-selectors-4-20221111/$ から先送りされた） ◎ The grid-structural (column) selectors (deferred from an earlier draft of Selectors 4)
- `時間~次元な疑似類＠#time-pseudos$ （~level 4 の `2022年 11月 11日 作業草案＠~TR/2022/WD-selectors-4-20221111/$ から先送りされた） ◎ The time-dimensional pseudo-classes (deferred from an earlier draft of Selectors 4)
謝辞
~CSS~WGは、 年月にわたって［ この仕様を形成する基になった`~level 4$ までの各~仕様 ］に貢献された方々に感謝する。 加えて，この ~level 5 仕様に対し特に貢献された次に挙げる方々にも特別に感謝する ⇒ `Joey Arhar^en ◎ The CSS working group would like to thank everyone who contributed to the previous Selectors specifications over the years, as those specifications formed the basis for this one. In particular, the working group would like to extend special thanks to the following for their specific contributions to Selectors Level 5: Joey Arhar.
~privacyの考慮点
適切なときに`~level 4$ から複製されるべきである。 ◎ Should be copied from Level 4 when appropriate.
~securityの考慮点
適切なときに`~level 4$ から複製されるべきである。 ◎ Should be copied from Level 4 when appropriate.