# Name-only container queries + comma-separated queries

Status: Name-only queries Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Comma-separated `@container` query lists: Chrome 150.  
Source: https://developer.chrome.com/release-notes/148 and https://developer.chrome.com/release-notes/150  
Page: https://designforai.dev/css/name-only-container-queries

`@container name { }` with no condition matches whenever a named container exists, which is a clean way to switch styles by context ("inside the sidebar") without a size test.

## HTML

```html
<aside class="fx-037-sidebar"><a class="fx-037" href="#">Link in sidebar</a></aside>
<main><a class="fx-037" href="#">Link in main</a></main>
```

## CSS

```css
.fx-037-sidebar {
  container-name: sidebar;
  background: #f3f4f6;
  padding: 12px;
  margin-bottom: 8px
}
.fx-037 {
  font: 14px system-ui;
  color: #2563eb
}
@container sidebar {
  .fx-037 {
    color: #111;
    font-weight: 600;
    text-decoration: none
  }
}
.fx-037 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
```

Fallback: Unsupported browsers ignore the rule; the default link style applies.

## Prompt

To style a component differently by region, name the region with `container-name: sidebar` (no `container-type` needed) and use `@container sidebar { ... }` with no query. Use size conditions only when the layout really depends on width.