|
| 1 | +# Selectors 4 Explainer |
| 2 | + |
| 3 | +## Authors |
| 4 | + |
| 5 | + - Chris Lilley (W3C) |
| 6 | + |
| 7 | +## Participate |
| 8 | +- [Issue tracker](https://github.com/w3c/csswg-drafts/issues?q=state%3Aopen%20label%3A%22selectors-4%22) |
| 9 | + |
| 10 | +## What are Selectors |
| 11 | + |
| 12 | +Introduced with [CSS1](https://www.w3.org/TR/CSS1/#basic-concepts) in 1996, |
| 13 | +Selectors are a mature and widely deployed way to |
| 14 | +select **individual parts** of a (typically HTML) document, |
| 15 | +so that they may be **styled** or **manipulated with script**. |
| 16 | + |
| 17 | +They were further developed in [CSS2.1](https://www.w3.org/TR/CSS2/selector.html#q5.0) |
| 18 | +(W3C Recommendation, from 2011) |
| 19 | +and in [Selectors 3](https://www.w3.org/TR/selectors-3/) |
| 20 | +(W3C Recommendation, 2018). |
| 21 | + |
| 22 | +[Selectors 4](https://www.w3.org/TR/selectors-4/) |
| 23 | +is now widely deployed, stable, |
| 24 | +and is being prepared for W3C Recommendation, |
| 25 | +while less-mature Selectors have been moved to |
| 26 | +[Selectors 5](https://www.w3.org/TR/selectors-5/). |
| 27 | + |
| 28 | +However, the Selectors 4 specification |
| 29 | +is a _complete specification_ of Selectors, |
| 30 | +(including material from levels 1 through 3) |
| 31 | +not a delta. This aids readability. |
| 32 | + |
| 33 | +In view of this widespread use, |
| 34 | +this explainer does not address early-review questions |
| 35 | +such as general user need or alternatives considered; |
| 36 | +instead it motivates the particular changes found in Selectors 4. |
| 37 | + |
| 38 | +## Why `Selectors` not `CSS Selectors`? |
| 39 | + |
| 40 | +Selectors have expanded beyond their initial use in CSS; |
| 41 | +they are also widely used in the Document Object Model, |
| 42 | +to select parts of a document for manipulation by JavaScript. |
| 43 | +These are both majority uses, hence the naming of the specification. |
| 44 | + |
| 45 | +## What is new in Selectors 4 |
| 46 | + |
| 47 | +(Expanded from [Changes Since Level 3](https://drafts.csswg.org/selectors-4/#changes-level-3)) |
| 48 | + |
| 49 | +### Conditional Logic |
| 50 | + |
| 51 | +- The matches-any [`:is`](https://www.w3.org/TR/selectors-4/#matches) pseudo-class, |
| 52 | + formerly called `:matches()`, |
| 53 | + has been added to allow stylesheet authors to group functionally related elements, |
| 54 | + such as any element that is either hovered or focussed. |
| 55 | + |
| 56 | +### Interactivity and Forms |
| 57 | + |
| 58 | +### Hyperlinking Support |
| 59 | + |
| 60 | +- Added [`:any-link`](https://www.w3.org/TR/selectors-4/#the-any-link-pseudo) to match |
| 61 | + any element that acts as the source anchor of a hyperlink |
| 62 | + |
| 63 | +### Clearer Expression of Authorial Intent |
| 64 | + |
| 65 | +- Expanded the sibling-counting [`:nth-child()`](https://www.w3.org/TR/selectors-4/#the-nth-child-pseudo) |
| 66 | + and negation [`:not()`](https://www.w3.org/TR/selectors-4/#negation) pseudo-classes |
| 67 | + to accept a **selector list**. |
| 68 | + |
| 69 | +### Internationalization Improvements |
| 70 | + |
| 71 | +- Expanded the content language [`:lang()`](https://www.w3.org/TR/selectors-4/#the-lang-pseudo) pseudo-class |
| 72 | + to accept **wildcard matching** and **lists of language codes**. |
| 73 | +- |
| 74 | + |
| 75 | +### Consolidation |
| 76 | + |
| 77 | +Selectors first introduced in |
| 78 | +[CSS Basic UI 3](https://www.w3.org/TR/css-ui-3/), |
| 79 | +such as |
| 80 | +have been moved to the main Selectors 4 specification. |
| 81 | + |
| 82 | +## Further reading |
| 83 | + |
| 84 | +For further information on the use of Selectors in CSS |
| 85 | +(covering all levels, but with a focus on level 4), see |
| 86 | +[CSS Selectors](https://css-tricks.com/css-selectors/) on CSS-Tricks. |
| 87 | + |
| 88 | +For selectors in the DOM, see |
| 89 | +[NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) on MDN. |
| 90 | + |
| 91 | +The [Horizontal Review of Selectors 4](https://github.com/w3c/csswg-drafts/issues/13469). |
0 commit comments