[css-contain-3] Querying only the name of a container

[kizu]

With container queries, we can have named containers, and then we can use these names to filter some queries. Here is a quote from the spec:

The container-name property specifies a list of query container names. These names can be used by @container rules to filter which query containers are targeted.

However, what if we could use this name on its own, to query just the presence of some named container, without any associated queries? (CodePen that is not working anywhere for now)

<div class="container">
  <div class="element">Wouldn’t it be nice if I was light green?</div>
</div>

.container {
  container-name: --container;
}

@container --container {
  .element {
    background: lightgreen;
  }  
}

I wrote a blog post where I describe how we can do it today with size container queries and style container queries, although in a rather hacky way. I sometimes wanted to be able to query just the presence of some container around my element, without any specifics.

I also noticed that in the current container query syntax, it already allows to have just the container name! But it doesn't do anything:

@container <container-condition># {
  <block-contents>
}

<container-condition> = [ <container-name>? <container-query>? ]!

So, unless there are reasons not to do this, I propose to explicitly allow only the container-name in the container query, and make it match if there is any named container with that name anywhere around the target element.

[kizu]

Closing as a duplicate, which was resolved already. Thanks @mirisuzanne for pointing this out!