Explore the Latest CSS Features and Powerful New Selectors

In a recent front‑end meetup the author summarized a wide range of CSS features that are either already supported or will soon be, many of which many developers may not be aware of.

Introduction

The State of CSS reports (2019, 2020) highlight a section called "CSS new features" that lists many upcoming selectors and properties.

CSS Pseudo‑class Selectors

Selectors have evolved from Level 3 to Level 4, adding powerful pseudo‑classes such as :is() and :where(). Both match a list of selectors, but :where() always has a specificity of 0 while :is() inherits the highest specificity from its list.

:is(.header, .main) .p { color: purple; }
:where(.header, .main) .p { color: red; }

These selectors are equivalent to writing the selectors explicitly, but they simplify the markup.

.header .p, .main .p { color: purple; }
.header .p, .main .p { color: red; }

:not() and :has()

The :not() pseudo‑class can be used to exclude elements, for example to remove margin from the last card: .card:not(:last-child) { margin-bottom: 20px; } The upcoming :has() selector (parent selector) allows selecting a parent based on its children, enabling patterns like:

section:has(h1) { border-color: blue; }
section:not(:has(p)) { margin-bottom: 30px; }

:empty and :blank

Both pseudo‑classes target empty elements, but :blank also matches elements that contain only whitespace, making it useful for form validation.

:focus, :focus-visible, and :focus-within

Chrome 86 introduced :focus-visible and :focus-within. :focus-visible only shows focus styles when the element receives focus via keyboard, while :focus reacts to mouse clicks as well. :focus-within triggers when an element or any of its descendants receives focus, similar to event bubbling.

button:focus { outline: 2px dotted #09f; }
button:focus-visible { outline: 2px solid #f36; }
button:focus:not(:focus-visible) { outline: 2px dotted #416dea; }

CSS Color Module (Level 4 & 5)

Level 4 adds new color functions ( hwb(), lch(), lab(), color-mix(), color-contrast(), color()) and updates the syntax of rgb(), rgba(), hsl(), hsla() to allow space‑separated values and a slash for alpha.

#09f
#90eafe
rgb(123 123 123)
rgba(123 123 123 / .5)
hsl(220 50% 50%)
hsla(220 50% 50% / .5)

Hex colors can now include alpha ( #rrggbbaa or #rgba).

#0f08;
#00ff0088;

New functions allow specifying the color space, e.g.:

color(display-p3 1 0 1);
color(lab 50% 150 -50);
color(srgb 100% 0% 50%);

Media queries can detect high‑dynamic‑range displays to apply appropriate color spaces.

Background‑position and Background‑repeat

Instead of using calc(), you can position a background relative to the right or bottom edges using keywords:

:root { --xPos: 50px; --yPos: 50px; }
.container { background-position: right var(--xPos) bottom var(--yPos); }

When using percentage values, the calculation is based on the difference between container size and image size.

Masking and Clipping

The mask property (CSS Masking Module Level 1) lets you define visible areas using an image:

h1 { mask-image: url(mask.png); }

The clip-path property can create irregular shapes, especially with the path() function.

Blend Modes

Properties mix-blend-mode and background-blend-mode enable Photoshop‑like effects, useful for product‑image recoloring.

Custom Properties and Invalid Variables

CSS custom properties (variables) can be marked as invalid by assigning initial. When used with var(--prop, fallback), the fallback is applied if the variable is invalid.

:root { --invalid: initial; --valid: ; }
.foo { background-color: var(--invalid, red); }

Lea Verou introduced a switch‑like pattern using --ON (invalid) and --OFF (valid) to toggle multiple values with a single property.

:root { --ON: initial; --OFF: ; }
button { --is-raised: var(--OFF); border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1)); }
button:hover { --is-raised: var(--ON); }

Using this technique you can build complex theme switches without any JavaScript.

The article concludes that many of these "new" CSS features are already usable and will continue to simplify front‑end development.