style()

A part of container queries that lets you style elements based on the computed value of a CSS property (usually a custom property) on their parent container, rather than just size.

It is documented as part of the CSS Conditional Rules, CSS Container Queries specification. This is an experimental technology. The syntax and behavior are still subject to change.

/* Usage Example */
/* Change theme based on parent's --theme variable */
@container style(--theme: dark){
.card{
    background: #222;
    color: #fff;
  }
}
Limited availability Since 2020 0% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Interop 2026 focus area ? Learn more →
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC