diff --git a/selectors-4/Overview.bs b/selectors-4/Overview.bs index c16091dab9dc..8603b29b36f1 100644 --- a/selectors-4/Overview.bs +++ b/selectors-4/Overview.bs @@ -25,9 +25,12 @@ Abstract: Selectors are patterns that match against elements in a tree, a Abstract: Selectors Level 4 describes the selectors that already exist in [[!SELECT]], and further introduces new selectors for CSS and other languages that may need them. At Risk: the column combinator At Risk: [=user action pseudo-classes=] applying to non-[=tree-abiding pseudo-elements=] -At Risk: the '':blank'' pseudo-class Ignored Terms: function token, Document, DocumentFragment, math, h1, shadow tree, querySelector(), quirks mode, button, a, span, object, p, div, q, area, link, label, input, html, em, li, ol, pre, CSS Value Definition Syntax Ignored Vars: identifier, i +Ignore MDN Failure: #blank-pseudo +Ignore MDN Failure: #the-column-combinator +Ignore MDN Failure: #the-future-pseudo +Ignore MDN Failure: #the-past-pseudo Ignore MDN Failure: #the-target-within-pseudo WPT Path Prefix: css/selectors/ WPT Display: closed @@ -47,6 +50,7 @@ spec:html; type:element-attr; for:a; text:href spec:html; type:element; text:meta text:audio +spec:selectors-5; type:selector; text::blank @@ -269,12 +273,6 @@ Selectors Overview of which the target is already visited [[#link]] 1 - - E:local-link - an E element being the source anchor of a hyperlink - targeting the current URL - [[#the-local-link-pseudo]] - 4 E:target an E element being the target of the current URL @@ -285,28 +283,6 @@ Selectors Overview an E element being a [=scoping root=] [[#the-scope-pseudo]] 4 - - - E:current - an E element that is currently presented in a time-dimensional canvas - [[#the-current-pseudo]] - 4 - - E:current(s) - an E element that is the deepest '':current'' element that - matches selector s - [[#the-current-pseudo]] - 4 - - E:past - an E element that is in the past in a time-dimensional canvas - [[#the-past-pseudo]] - 4 - - E:future - an E element that is in the future in a time-dimensional canvas - [[#the-future-pseudo]] - 4 E:active @@ -381,11 +357,6 @@ Selectors Overview a user-input element E that requires/does not require input [[#opt-pseudos]] 3-UI/4 - - E:blank - a user-input element E whose value is blank (empty/missing) - [[#blank]] - 4 E:user-invalid a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required) @@ -475,25 +446,6 @@ Selectors Overview an F element preceded by an E element [[#general-sibling-combinators]] 3 - - - F || E - an E element that represents a cell in a grid/table - belonging to a column represented by an element F - [[#the-column-combinator]] - 4 - - E:nth-col(n) - an E element that represents a cell belonging to the - nth column in a grid/table - [[#the-nth-col-pseudo]] - 4 - - E:nth-last-col(n) - an E element that represents a cell belonging to the - nth column in a grid/table, counting from the last one - [[#the-nth-last-col-pseudo]] - 4 Note: Some Level 4 selectors (noted above as "3-UI") were introduced in [[CSS3UI]]. @@ -2831,40 +2783,6 @@ The Link History Pseudo-classes: '':link'' and '':visited'' they might not need to click the footnote again. - - - - The :local-link pseudo-class - allows authors to style hyperlinks - based on the users current location within a site. - It represents an element that is - the source anchor of a hyperlink whose target's absolute URL - matches the element's own document URL. - If the hyperlink's target includes a fragment URL, - then the fragment URL of the current URL must also match; - if it does not, then the fragment URL portion of the current URL - is not taken into account in the comparison. - -
- 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; }
-
- - Note: The current URL of a page can change as a result of user actions - such as activating a link targeting a different fragment within the same page; - or by use of the pushState API; - as well as by the more obvious actions of navigating to a different page - or following a redirect (which could be initiated by protocols such as HTTP, - markup instructions such as <meta http-equiv="...">, - or scripting instructions ). - UAs must ensure that '':local-link'', - as well as the '':target'' pseudo-class below, - respond correctly to all such changes in state. -

The Target Pseudo-class: '':target''

@@ -3244,114 +3162,6 @@ The Focus Container Pseudo-class: '':focus-within'' matches the conditions for matching '':focus''. -

-The Interest Pseudo-classes: '':interest-source'' and '':interest-target''

- - 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 - - 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 <{html-global/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 <{html-global/popover}> element). - - The :interest-source pseudo-class - applies to an [=interest source=] element that the user is currently "showing interest" in, - and the :interest-target pseudo-class - applies to the associated [=interest target=] - of an element matching '':interest-source''. - - 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 <{html-global/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 <{html-global/interestfor}> attribute. - - -

-Time-dimensional Pseudo-classes

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

-The Current-element Pseudo-class: '':current''

- - The :current pseudo-class represents the - element, or an ancestor of the element, that is currently being displayed. - - 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.) - -
- 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;
-		}
-
-
- -

-The Past-element Pseudo-class: '':past''

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

-The Future-element Pseudo-class: '':future''

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

Resource State Pseudo-classes

@@ -3700,36 +3510,6 @@ The Selected-option Pseudo-classes: '':checked'', '':unchecked'', and '':indeter

Input Value-checking

-

-The Empty-Value Pseudo-class: '':blank''

- - The :blank pseudo-class - applies to user-input elements whose input value is empty - (consists of the empty string or otherwise null input). - -
- Roughly speaking, if a human looked at a printout of the form - and would say it’s blank, - it matches '':blank''. - - A rule of thumb for interpreting '':blank'' on form controls is: - - * 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.) - * If it sometimes submits, and is set to not submit, it matches '':blank''. - (Such as HTML’s <input type=checkbox> when not checked.) - * 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 languages can specify more precise rules - for when form controls match '':blank''. -
- - Note: This selector is at-risk. -

The Validity Pseudo-classes: '':valid'' and '':invalid''

@@ -4525,89 +4305,6 @@ Subsequent-sibling combinator (~) -

-Grid-Structural Selectors

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

-Column combinator (||)

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

-'':nth-col()'' pseudo-class

- - 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. - - The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. - - -

-'':nth-last-col()'' pseudo-class

- - 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. - - The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. - -

Calculating a selector's specificity

@@ -5392,7 +5089,7 @@ Changes since the 11 November 2022 Working Draft Significant changes since the 11 November 2022 Working Draft: - * Marked '':blank'' as at-risk and removed the at-risk status from '':read-write'' and '':has()'' + * Removed the at-risk status from '':read-write'' and '':has()'' * Added '':popover-open'' pseudo-class. (Issue 8637) * Made '':has()'' and the selector argument of '':nth-child()''/'':nth-last-child()'' @@ -5400,6 +5097,16 @@ Changes since the 11 November 2022 Working Draft (Issue 7676) * Moved the legacy single-colon pseudo-element syntax into the grammar itself. (Issue 8122) + * Deferred the '':local-link'' pseudo-class to Level 5. + (Issue 12799) + * Deferred the '':interest-source'' and '':interest-target'' pseudo-classes to Level 5. + (Issue 12799) + * Deferred the '':blank'' pseudo-class to Level 5. + (Issue 12799) + * Deferred the grid-structural (column) selectors to Level 5. + (Issue 12799) + * Deferred the time-dimensional pseudo-classes to Level 5. + (Issue 12799)

Changes since the 7 May 2022 Working Draft

@@ -5585,15 +5292,13 @@ Changes Since Level 3
  • Extended '':not()'' to accept a selector list.
  • Added '':is()'' and '':where()'' and '':has()''.
  • Added '':scope''. -
  • Added '':any-link'' and '':local-link''. -
  • Added time-dimensional pseudo-classes. +
  • Added '':any-link''.
  • Added '':target-within'', '':focus-within'', and '':focus-visible''.
  • Added '':dir()''.
  • Expanded '':lang()'' to accept wildcard matching and lists of language codes.
  • Expanded :nth-child() to accept a selector list.
  • Merged in input selectors from CSS Basic User Interface Module Level 3 and added back '':indeterminate''. -
  • Added '':blank'' and '':user-invalid''. -
  • Added grid-structural (column) selectors. +
  • Added '':user-invalid''.
  • Added case-insensitive / case-sensitive attribute-value matching flags. diff --git a/selectors-5/Overview.bs b/selectors-5/Overview.bs index 036ed686b075..53cda1ae5f8a 100644 --- a/selectors-5/Overview.bs +++ b/selectors-5/Overview.bs @@ -38,7 +38,7 @@ Module Interactions Location Pseudo-classes

    -The local link pseudo-class '':local-link''

    +The Local Link Pseudo-class '':local-link'' The :local-link pseudo-class allows authors to style [[selectors-4#the-any-link-pseudo|hyperlinks]] @@ -136,6 +136,149 @@ The local link pseudo-class '':local-link'' and the link is same-page? Should "null segments" count as matching, or not? +

    +User Action Pseudo-classes

    + +

    +The Interest Pseudo-classes: '':interest-source'' and '':interest-target''

    + + 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 + + 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 <{html-global/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 <{html-global/popover}> element). + + The :interest-source pseudo-class + applies to an [=interest source=] element that the user is currently "showing interest" in, + and the :interest-target pseudo-class + applies to the associated [=interest target=] + of an element matching '':interest-source''. + + 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 <{html-global/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 <{html-global/interestfor}> attribute. + +

    +The Input Pseudo-classes

    + +

    +Input Value-checking

    + +

    +The Empty-Value Pseudo-class: '':blank''

    + + The :blank pseudo-class + applies to user-input elements whose input value is empty + (consists of the empty string or otherwise null input). + +
    + Roughly speaking, if a human looked at a printout of the form + and would say it’s blank, + it matches '':blank''. + + A rule of thumb for interpreting '':blank'' on form controls is: + + * 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.) + * If it sometimes submits, and is set to not submit, it matches '':blank''. + (Such as HTML’s <input type=checkbox> when not checked.) + * 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 languages can specify more precise rules + for when form controls match '':blank''. +
    + +

    +Time-dimensional Pseudo-classes

    + + 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 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. + + 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''. + +

    +The Current-element Pseudo-class: '':current''

    + + The :current pseudo-class represents the + element, or an ancestor of the element, that is currently being displayed. + + 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.) + +
    + 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;
+		}
+
    +
    + +

    +The Past-element Pseudo-class: '':past''

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

    +The Future-element Pseudo-class: '':future''

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

    Exposing custom state: the '':state()'' pseudo-class

    @@ -213,6 +356,85 @@ Heading Structures: the heading pseudo-classes '':heading'', and '':heading()''< parsing/parse-heading.html +

    +Grid-Structural Selectors

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

    +Column combinator (||)

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

    +'':nth-col()'' pseudo-class

    + + 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. + + The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. + +

    +'':nth-last-col()'' pseudo-class

    + + 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. + + The CSS Syntax Module [[!CSS3SYN]] defines the An+B notation. +

    Combinators

    @@ -256,12 +478,21 @@ Changes Since Level 4 Additions since Level 4: