Add docs for :open pseudo-class #37869
Conversation
github-actions
bot
added
Content:CSS
|
This pull request has merge conflicts that must be resolved before it can be merged. |
Preview URLs (6 pages)(comment last updated: 2025-02-04 22:09:29) |
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
There was a problem hiding this comment.
I created an example we can use based on your example. See https://codepen.io/estelle/pen/QwLRvgW
plus one other suggestion.
|
|
||
| Note that the open and closed states are semantic states, and don't necessary correlate with the visibility of the element in question. For example, a `<details>` element that is expanded to show its content is open, and will be selected by the `details:open` selector, even if it is hidden with a {{cssxref("visibility")}} value of `hidden`. | ||
|
|
||
| {{domxref("Popover API", "Popover", "", "nocode")}} elements (that is, elements with the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute set on them) have distinct semantic states representing popovers that are showing or hidden, which can coexist alongside open and closed states. You can't use the `:open` pseudo-class to target styles at popovers that are in the showing state — instead, you need to use the {{cssxref(":popover-open")}} pseudo-class. |
There was a problem hiding this comment.
| {{domxref("Popover API", "Popover", "", "nocode")}} elements (that is, elements with the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute set on them) have distinct semantic states representing popovers that are showing or hidden, which can coexist alongside open and closed states. You can't use the `:open` pseudo-class to target styles at popovers that are in the showing state — instead, you need to use the {{cssxref(":popover-open")}} pseudo-class. | |
| {{domxref("Popover API", "Popover", "", "nocode")}} elements (that is, elements with the [`popover`](/en-US/docs/Web/HTML/Global_attributes/popover) attribute set on them) have distinct semantic states representing popovers that are showing or hidden, which can coexist alongside open and closed states. To target a popover element in an open state, use the {{cssxref(":popover-open")}} pseudo-class instead. |
There was a problem hiding this comment.
Good suggestion. I've used your text, except that I've changed "open state" to "showing state". The official term for a popover's open state is showing, and that is the language used throughout the popover docs, even the :popover-open page. Might have been better to call the pseudo :popover-showing, but hey ho.
| position: relative; | ||
| } | ||
|
|
||
| .select-wrapper::after { |
There was a problem hiding this comment.
this arrow feels clickable, but isn't.
https://codepen.io/estelle/pen/QwLRvgW?editors=1100
the linked example includes a changing arrow, and doesn't require a repaint (the border is always there, but transparent)
There was a problem hiding this comment.
Thanks for this — I was struggling with this example, and you really helped me out.
I've used your example verbatim, except that I've made the SVG arrows smaller (they were a bit big and clunky).
|
Super, cheers @estelle! 🫶 |
Description
This PR documents the
:openpseudo-class, which is now supported in Chrome 133: see the ChromeStatus entry.Specifically, I have:
:open, and linked that page from appropriate places:openinstead of e.g.dialog[open]x[open]as a fallback if:openis not supported.:openhas already been added to BCD.Motivation
Additional details
Related issues and pull requests