@@ -622,6 +622,14 @@ Naming Query Containers: the 'container-name' property</h3>
622622 .card { margin-inline: 2em; }
623623 }
624624 </pre>
625+
626+ It is also possible to query for a container only based on its name.
627+
628+ <pre class=lang-css>
629+ @container my-page-layout {
630+ .card { padding: 1em; }
631+ }
632+ </pre>
625633 </div>
626634
627635
@@ -923,7 +931,7 @@ Container Queries: the ''@container'' rule</h3>
923931 where:
924932
925933 <pre class="prod def">
926- <dfn><<container-condition>></dfn> = [ <<container-name>> ] ? <<container-query>>
934+ <dfn><<container-condition>></dfn> = [ <<container-name>> ? <<container-query>> ? ]!
927935 <dfn><<container-name>></dfn> = <<custom-ident>>
928936 <dfn><<container-query>></dfn> = not <<query-in-parens>>
929937 | <<query-in-parens>> [ [ and <<query-in-parens>> ]* | [ or <<query-in-parens>> ]* ]
@@ -959,8 +967,7 @@ Container Queries: the ''@container'' rule</h3>
959967 in the <<container-query>> . If the <<container-query>> contains
960968 unknown or unsupported [=container feature=] s,
961969 no [=query container=] will be selected for that <<container-condition>> .
962- The optional <<container-name>>
963- filters the set of [=query containers=] considered
970+ The <<container-name>> filters the set of [=query containers=] considered
964971 to just those with a matching [=query container name=] .
965972
966973 Once an eligible [=query container=] has been selected for an element,
@@ -969,6 +976,8 @@ Container Queries: the ''@container'' rule</h3>
969976 If no ancestor is an eligible [=query container=] ,
970977 then the [=container query=] is ''unknown'' for that element.
971978 As with media queries, <<general-enclosed>> evaluates to ''unknown'' .
979+ If the <<container-query>> is omitted, the [=query container=] is eligible as
980+ long as the <<container-name>> matches.
972981
973982 If a [=container query=] includes multiple <<container-condition>> s,
974983 each condition will select it's own [=query container=] ,
0 commit comments