Difference between `:open` and `[open]`
I've just realized that
:open is not supported on Safari. From what I can tell the [open] attribute selector should be a drop-in replacement (at least for my use case, styling a <dialog>). Can't find anything backing that up aside from Google's AI summary when I search for it. Does that seem right?9 Replies
[open] is a property
:open is a pseudo-class
it means that xyz[open] will match xyz, but xyz:open won't
that is for something like <xyz open>what he said :this:
https://developer.mozilla.org/en-US/docs/Web/CSS/:open
there are more differences
but it's not a whole lot more than what i said
the MDN article for
<details> has a note about this: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
you can also use the open attribute in other elements - it doesn't have an effect, but you can
the :open won't match those as they don't have an open state
:open might be relatively new? unfortunately browser implementation of details/summary has been a bit of a messit is very new
exactly 6 months old
Thanks! I mostly wanted to know, for my use case, if I can use
dialog[open] as a replacement for dialog:open, it seems like I canyou should use
dialog[open] for a few years