CSS
- What you need to know about modern CSS
- The Undeniable Utility Of CSS :has
- @property: Next-gen CSS variables now with universal browser support
- Animated multiline link underlines: Like used here on this site together with automatic heading anchor links.
- Drawing made in pure CSS
New and old pseudo selectors
List of all pseudo selectors on MDN
| Pseudo selectors | Explanation | Can I Use |
|---|---|---|
:is() | Takes a list of selectors and applies the styles to any element matching one or more of the selectors. | caniuse: :is() |
:where() | Similarly to :is(), but with zero specificity. | caniuse: :where() |
:not() | Excludes elements that match a specified selector. | caniuse: :not() |
:has() | Parent selector that matches based on child elements. | caniuse: :has() |
:empty | Targets elements that do not have any children, including text nodes. | caniuse: :empty |
:focus-visible | Applies styles to elements when they gain focus, but only if the focus was visible like with keyboard navigation. | caniuse: :focus-visible |
:focus-within | Applies styles to an element if any of its descendants have focus. | caniuse: :focus-within |
::backdrop | Allows styling the background layer of elements like <dialog> or fullscreen elements. | caniuse: :backdrop |