@@ -588,9 +588,7 @@ Container Queries: the ''@container'' rule</h3>
588588 The syntax of the ''@container'' rule is:
589589
590590 <pre class="prod def">
591- @container
592- [ <<container-name>> | [ name(<<container-name>> ) || type(<<container-type>> +) ] ]?
593- <<container-query>> {
591+ @container [ <<container-name>> ]? <<container-query>> {
594592 <<stylesheet>>
595593 }
596594 </pre>
@@ -619,43 +617,34 @@ Container Queries: the ''@container'' rule</h3>
619617
620618 For each element,
621619 the [=query container=] to be queried
622- is selected from among the element’s ancestor [=query containers=] .
620+ is selected from among the element’s ancestor [=query containers=]
621+ that have a valid 'container-type'
622+ for all the [=container features=]
623+ in the <<container-condition>> .
623624 The optional <dfn><<container-name>></dfn>
624625 filters the set of [=query containers=] considered
625- to just those with a matching [=query container name=] ,
626- and the optional <dfn><<container-type>></dfn>
627- filters the set to just those with a matching 'container-type' .
628- The nearest remaining [=query container=] ancestor is selected.
629-
630- ISSUE: Should the UA automatically filter to the nearest compatible query container
631- if no specific type is provided?
632-
633- ISSUE(6393): Do we like this syntax for querying specific container types?
634-
635- A [=query container=] with a 'container-type' of ''container-type/size''
636- is a match for both ''container-type/inline-size'' and ''container-type/block-size'' .
626+ to just those with a matching [=query container name=] .
637627
638628 Once an eligible [=query container=] has been selected for an element,
639629 each [=container feature=] in the <<container-condition>>
640630 is evaluated against that [=query container=] .
641- If the selected [=query container=]
642- is not a valid 'container-type' for the feature,
643- or no ancestor is an eligible [=query container=] ,
631+ If no ancestor is an eligible [=query container=] ,
644632 then the [=container query=] is ''unknown'' for that element.
645633
646634 <div class=example>
647635 As with [=media queries=] ,
648636 we can string together multiple conditions in a single query list:
649637
650638 <pre class=lang-css>
651- @container card (inline-size > 30em) and (--responsive = true) {
639+ @container card (inline-size > 30em) and style (--responsive = true) {
652640 /* styles */
653641 }
654642 </pre>
655643
656644 The styles above will only be applied
657- if there nearest ancestor container named "card"
658- meets both the '@container/inline-size' and [=container style query|style=] conditions.
645+ if there is an ancestor container named "card"
646+ that meets both the '@container/inline-size'
647+ and [=container style query|style=] conditions.
659648 </div>
660649
661650 Style rules defined on an element inside multiple nested [=container queries=]
0 commit comments