[csswg-drafts] [css-contain-3] Container Queries and pseudo elements (#6711)

• From: Rune Lillesveen via GitHub <sysbot+gh@w3.org>
• Date: Mon, 04 Oct 2021 11:11:58 +0000
• To: public-css-archive@w3.org
• Message-ID: <issues.opened-1015043018-1633345916-sysbot+gh@w3.org>

lilles has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain-3] Container Queries and pseudo elements ==
How do we find the container for pseudo elements?

```html
<div id="outer" style="container-type: inline-size">
  <div id="inner" style="container-type: inline-size"></div>
</div>
```

```css
@container (min-width: 200px) {
  #inner::before {} /* is #inner or #outer the container? */
  #inner::after {} /* is #inner or #outer the container? */
  #inner::first-letter {} /* is #inner or #outer the container? */
  #outer::first-letter {} /* is #inner, #outer, or an ancestor of #outer the container? */
  #inner::first-line {} /* is #inner or #outer the container? */
  #outer::first-line {} /* is #inner, #outer, or an ancestor of #outer the container? */
}
```

More cases like ::marker and ::backdrop.

::slotted() and ::part() would match the same flat tree ancestor container as they would have when styled with normal selectors in their own tree scopes, right?


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6711 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 4 October 2021 11:12:00 UTC