I'm not really clear on the distinction of what one does vs. the other, from a practical standpoint, but at least that led me to this explanation of the difference which... seems that it's the other way around? :: seems to be pseudo-element and : seems to be pseudo-class.
I think what I got from that link is that :: specifies things that modify the DOM (i.e. a false element) whereas : specifies things that query against existing objects in the DOM (i.e. a false class), and so I at least kinda-sorta see why that would exist, but it also seems that user-agents are going to have to support : for the legacy pseudo-elements for quite some time. But this will help me out if I ever run into trouble with a new pseudo-element that a browser correctly distinguishes syntactically.
There's a bit of a history here... essentially, these were originally shipped with single colons :before and :after. Later, the committees decided they should draw a distinction between pseudo-elements (of which these are) and pseudoselectors, so they
Declared all future pseudoelements would only be accessible with 2 colons
Declared that really you should probably use 2 colons for ::before and ::after, but browsers would continue to support single.
TBH, I typically still use single colon (and I think many folks who started in CSS quite a while ago still do), but when I originally published with that there were some very loud complainers, to the extent that it seemed to be distracting from the point of the article, so I updated to use double in the text.
Ah, that makes total sense. And yeah I've been using :before and :after ever since they became a part of CSS (even before they were widely-supported), so seeing the :: versions caught me by surprise.
Anyway, thanks for the clarification! It all makes sense in retrospect, although it still seems weird to me that they decided that there needs to be specific syntax for pseudo-elements vs. pseudo-classes. It doesn't seem likely that they'd ever allow the two to collide, for example...
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
What's the difference between
:beforeand::before? I use:beforeall the time but I'd never seen the double-colon syntax before.stackoverflow.com/questions/101817...
There are a bunch of good answers.
TLDR:
::- pseudo-classes:- pseudo-elementsI'm not really clear on the distinction of what one does vs. the other, from a practical standpoint, but at least that led me to this explanation of the difference which... seems that it's the other way around?
::seems to be pseudo-element and:seems to be pseudo-class.I think what I got from that link is that
::specifies things that modify the DOM (i.e. a false element) whereas:specifies things that query against existing objects in the DOM (i.e. a false class), and so I at least kinda-sorta see why that would exist, but it also seems that user-agents are going to have to support:for the legacy pseudo-elements for quite some time. But this will help me out if I ever run into trouble with a new pseudo-element that a browser correctly distinguishes syntactically.There's a bit of a history here... essentially, these were originally shipped with single colons
:beforeand:after. Later, the committees decided they should draw a distinction between pseudo-elements (of which these are) and pseudoselectors, so they::beforeand::after, but browsers would continue to support single.TBH, I typically still use single colon (and I think many folks who started in CSS quite a while ago still do), but when I originally published with that there were some very loud complainers, to the extent that it seemed to be distracting from the point of the article, so I updated to use double in the text.
Ah, that makes total sense. And yeah I've been using
:beforeand:afterever since they became a part of CSS (even before they were widely-supported), so seeing the::versions caught me by surprise.Anyway, thanks for the clarification! It all makes sense in retrospect, although it still seems weird to me that they decided that there needs to be specific syntax for pseudo-elements vs. pseudo-classes. It doesn't seem likely that they'd ever allow the two to collide, for example...