Re: [csswg-drafts] [selectors][css-transitions-2] `:starting-style` pseudo-class (#10356)

@dbaron Thanks for the extra context! That helps to understand.

I think the most compelling example to me so far is this one, which aligns with the logic proposed in #6247:
```css
dialog {
  &, &[open]:starting-style {
    transform: translateY(-50%);
    &, &::backdrop {
      transition: all 0.25s ease-out allow-discrete;
      opacity: 0;
    }
  }
  &[open] {
    transform: translateY(0);
    &, &::backdrop {
      opacity: 1;
    }
  }
}
```

I've left [a comment](https://github.com/w3c/csswg-drafts/issues/6247#issuecomment-2121238979) on that ticket context related to `@starting-style`.

---

To answer your question about `div:starting-style p` vs. `div p:starting-style`, I think they would yield the same effect.

These—on the other hand—would not, as some of the styles exist outside the usage of `:starting-style`:
```css
/* Example 1 */
div {
  background-color: blue;
  p:starting-style {
    /* some styles */
  }
}

/* Example 2 */
div:starting-style {
  background-color: blue;
  p {
    /* some styles */
  }
}
```

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10356#issuecomment-2121248440 using your GitHub account


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

Received on Monday, 20 May 2024 21:34:31 UTC