Pseudo-classes/elements : vs ::

3 min read

Deviation Actions

Celvas's avatar
By
Published:
1.9K Views
Well, I'll be - where did that double-colon come from? It didn't come over the sea and it wasn't in search of India. No, it came with CSS3 and it is not, as some people believe, the new single-colon.

The double-colon is W3C's attempt to clarify the distinction between pseudo-elements and pseudo-classes, both of which received the same single-colon treatment in CSS1 and 2. Basically...


::after
::before
::first-letter
::first-line
::selection


... not all of which are accessible on deviantART - are pseudo-elements. The pseudo-classes (:active, :hover, etc.) are still subject to the single-colon.

Now I have good news and bad news. The bad news is that it's CSS3, so not every browser, namely everything preceeding IE version 9, supports the double-colon just yet. The good news is that you can use the single-colon for pseudo-elements, backward compatibility-style.


Comments18
Join the community to add your comment. Already a deviant? Log In
TehAngelsCry's avatar
Ouh! I've been writing a tutorial on this very thing already XD But I've been so busy with work that I haven't had chance to complete it yet D:

Must confess though, I've still not gotten into the habit of using the double-colon... I still use singles everywhere XD