Multiple Container Names — One Element, Many Identities

A Container With Multiple Names

CSS lets you give a single container multiple names, separated by spaces. This is useful when one element plays multiple roles — for example, a panel that is both a "card" host and an "article" host.

The Syntax

.shared-host {
  container: card article / inline-size;
}

/* Both queries match the same element */
@container card (min-width: 400px) {
  .card-image { width: 50%; }
}
@container article (min-width: 400px) {
  .article-figure { float: inline-start; }
}

When This Is Useful

Imagine a CMS where the same wrapper element hosts different component templates (a card, an article, a quote). Each template's CSS uses a different container name. Authoring all three rules against @container card would couple them; using separate names lets each template ship independently.

Naming Strategy

Use container names that describe what is hosted, not where it lives:

• ✅ card, article, media-object, hero
• ❌ sidebar-thing, top-area, right-section

Component-oriented names survive layout refactors.

Combining Multiple Names With Different Types

You cannot give the same element multiple types — container-type is single-valued. If you need both inline-size and size containment for different children, you need two nested containers.

Querying With OR

Currently, @container doesn't support OR between names. Each @container rule targets one name. To apply a rule when either "card" or "article" is wide enough, you'd need to duplicate the rule:

@container card (min-width: 400px) {
  .feature { padding: 1rem; }
}
@container article (min-width: 400px) {
  .feature { padding: 1rem; }
}

Quick Reference

/* One name, one type — most common */
.host-a { container: card / inline-size; }

/* Multiple names, one type */
.host-b { container: card article / inline-size; }

/* Type only, no name */
.host-c { container-type: inline-size; }