Selectors Level 5

1. Introduction

This is a diff spec against Selectors Level 4.

1.1. Module Interactions

This module extends the set of selectors defined for CSS in [selectors-4].

2. Location Pseudo-classes

2.1. The local link pseudo-class :local-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.

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.

nav :local-link { text-decoration: none; } 

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:

• :local-link(0) represents a link element whose target is in the same origin as the document’s URL
• :local-link(1) represents a link element whose target has the same origin and first path segment
• :local-link(2) represents a link element whose target has the same origin, first, and second path segments
• etc.

:not(:local-link(0)) { text-decoration-style: dashed; } 

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.

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.

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. Exposing custom state: the :state() pseudo-class

The :state() pseudo-class takes a case-sensitive argument and matches custom elements whose exposed custom states include the argument.

The grammar of the :state() pseudo-class is:

:state(  )

The exact matching behavior of :state() pseudo-class is defined by the host language. See HTML’s definition.

4. Combinators

4.1. Reference combinators /ref/

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.

label:is(:hover, :focus) /for/ input,       /* association by "for" attribute */
label:is(:hover, :focus):not([for]) input { /* association by containment */
  box-shadow: yellow 0 0 10px;
}

5. Changes

5.1. Changes Since Level 4

Additions since Level 4:

• Reference combinators (deferred from an earlier draft of Selectors 4)
• The functional form of the :local-link pseudo-class (deferred from an earlier draft of Selectors 4)
• The :state() pseudo-class

6. Acknowledgements

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 Considerations

Should be copied from Level 4 when appropriate.

Security Considerations

Should be copied from Level 4 when appropriate.