container-type

The container-type CSS property specifies the type of container context used in a container query.

Container queries allow you to selectively apply styles inside a container based on conditional queries performed on the container. The @container at-rule is used to specify the tests performed on a container, and the rules that will apply to the container’s contents if the query returns true.

Certain types of container query can only be performed on elements with specific container-type property values set, which establish specific container contexts on those containers:

Size: Enable selectively applying CSS rules to a container’s children based on a general size or inline size condition such as a maximum or minimum dimension, aspect ratio, or orientation. Scroll-state: Enable selectively applying CSS rules to a container’s children based on a scroll-state condition such as whether the container is a scroll container that is partially scrolled or whether the container is a snap target that is going to be snapped to its scroll snap container. Anchored: Enable selectively applying CSS rules to a container’s children based on whether the container is anchor-positioned and has a position-try fallback option applied to it.

Syntax example: container-type: normal;