# Name-only container queries + comma-separated queries

Estado: Consultas solo por nombre Baseline 2026 (Chrome 148, Safari 26.4, Firefox 149). Listas de consultas `@container` separadas por comas: Chrome 150.  
Fuente: https://developer.chrome.com/release-notes/148 and https://developer.chrome.com/release-notes/150  
Página: https://designforai.dev/es/css/name-only-container-queries

`@container name { }` sin condición coincide siempre que exista un contenedor con ese nombre, una forma limpia de cambiar estilos según el contexto ("dentro de la barra lateral") sin comprobar el tamaño.

## 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: Los navegadores sin soporte ignoran la regla; se aplica el estilo de enlace por defecto.

## Prompt

Para estilizar un componente de forma distinta según la región, nombra la región con `container-name: sidebar` (no hace falta `container-type`) y usa `@container sidebar { ... }` sin consulta. Usa condiciones de tamaño solo cuando el layout dependa de verdad del ancho.