Unlock the Latest CSS Features: Pseudo‑Classes, Color Functions, Masks & More

Introduction

During a recent front‑end meetup the author reviewed a collection of emerging CSS features, many of which are already usable or will be supported soon. The article revisits both brand‑new and previously overlooked capabilities to help developers improve their daily workflow.

CSS State of the Art Reports

References to the 2019 and 2020 State of CSS reports highlight the "CSS new features" section, which only scratches the surface of what is available.

Pseudo‑Class Selectors

:is() and :where()

The

:is()

and

:where()

selectors simplify complex selector lists.

:where()

always has a specificity of 0, while

:is()

inherits the highest specificity from its arguments.

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

:not() and :has()

The

:not()

selector can replace manual margin adjustments for the last card in a series, and the upcoming

:has()

selector will enable parent‑selection based on child content.

<code>.card:not(:last-child) { margin-bottom: 20px; }</code>

Combining

:not()

with

:has()

yields different matching logic, as illustrated in the article.

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

These selectors allow fine‑grained control over focus ring styling, distinguishing between mouse and keyboard interactions.

<code>button:focus { outline: 2px dotted #09f; }
button:focus-visible { outline: 2px solid #f36; }</code>

Background Position & Repeat

Beyond the classic

top

/

left

keywords,

right

and

bottom

can be used directly, simplifying calculations that previously required

calc()

. Percent‑based positions are explained with a numeric example.

<code>.container { background-position: right var(--xPos) bottom var(--yPos); }</code>

The article also covers

background-repeat

values

round

and

space

, showing how they affect tiling.

Masking & Clipping

CSS Masking Module Level 1 introduces

mask

and

clip-path

for controlling visible regions, with demos of emoji masking, skin‑tone swapping, and irregular shapes.

<code>h1 { mask-image: url(mask.png); }</code>

Color Module Level 4 & 5

New color functions such as

hwb()

,

lch()

,

lab()

,

color‑mix()

,

color‑contrast()

, and

color‑adjust()

are introduced, along with support for alpha in hex notation (

#rrggbbaa

) and functional notation using spaces and

/

for alpha.

<code>#0f08 { color: #0f08; }
color: rgb(255 255 255 / .25);
color: lch(50% 0 0);
color: color-mix(red, white);
color: color-contrast(white vs red, white, green);</code>

Media queries can detect high‑dynamic‑range displays to apply

display‑p3

color spaces.

Custom Properties & Invalid Variables

The article explains how declaring a custom property with the value

initial

creates an "invalid" variable that forces

var()

to fall back to its second argument, enabling switch‑like behavior without JavaScript.

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

Complex UI themes (dark, light, blue) are built using this technique, demonstrating multi‑state styling purely with CSS.

Conclusion

The article serves as a deep dive into many "new" CSS features that are either already supported or on the horizon, encouraging developers to experiment with them in real projects.