CSS container-name Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query is a CSS rule that allows you to apply styles to an element based on the size of its nearest ancestor with a containment context. By giving a containment context a name, you can specifically target it using the @container at-rule instead of having to target the nearest ancestor with containment. This can be useful for creating more complex and reusable container queries. The container-name property can be used on any element, but it is most commonly used on query containers. A query container is an element that is used to define the scope of a container query. Query containers can be any element, but they are typically block-level elements such as div, section, or article.

Initial value
none
Applies to
all elements
Inherited
no
Computed value
none or an ordered list of identifiers
Animatable
no
JavaScript syntax
object.style.containerName

Syntax

container-name: <container-name>

Values

  • <container-name>A case-sensitive string that is used to identify the container.

Example

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Browser Support

The following table will show you the current browser support for the CSS container-name property.

Desktop
Edge Chrome Firefox Opera Safari
1051051109116
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
105110721620105

Last updated by CSSPortal on: 31st December 2023