2023
4 featuresThe :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
The of syntax for the :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements by the relative position of elements, counted from the first or last sibling matching a selector list.
2022
3 featuresThe ::backdrop CSS pseudo-element is a box underneath an element in the top layer, such as a <dialog>. It can be used to create obscuring effects distinguishing a modal element from the elements underneath.
The :focus-visible CSS pseudo-class selects elements that match the :focus pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
2021
4 featuresThe ::file-selector-button CSS pseudo-element selects the button of a <input type="file"> element.
The :where() CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.
2020
9 featuresThe part and exportparts HTML attributes expose elements of a shadow DOM as named parts, which can be selected by the ::part() CSS pseudo-element for styling.
The ::placeholder CSS pseudo-element selects help text in <input> and <textarea> elements when no value is set.
The :focus-within CSS pseudo-class matches an element if the element or any of its children are focused.
The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.
The i identifier in a CSS attribute selector matches attribute values case-insensitively in document languages like XML where attribute values are case-sensitive.
The :host CSS pseudo-class selects the containing element of the shadow tree in which it is used. The :host() CSS pseudo-class selects the that element only if it matches the provided selector.
The :link CSS pseudo-class matches unvisited links, :visited matches visited links, and :any-link matches both.
2015
10 featuresThe ::first-letter CSS pseudo-element selects the first letter in an element for styling.
The ::first-line CSS pseudo-element selects the first line of text in an element for styling.
The :nth-child() and :nth-last-child() CSS functional pseudo-classes match elements based on their index within a list of elements. The :first-child and :last-child pseudo-classes match the first and last element in a list, and the :only-child pseudo-class matches an element with no siblings.
The :nth-of-type() and :nth-last-of-type() CSS functional pseudo-classes match elements based on their position among siblings of the same type. The :first-of-type, :last-of-type, and :only-of-type pseudo-classes match the first, last, and only elements of its type.
The @namespace CSS rule sets a default namespace or namespace prefix. Namespace prefixes allow CSS selectors to distinguish elements with the same name but different document types, such as the HTML <a> element and the SVG <a> element.
The form validity CSS pseudo-classes match <form> elements based on the constraints of a form field, such as validity (:valid, :invalid, :in-range, :out-of-range) and necessity (:optional or :required).