Double colon notation?


My searches comes up with “The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements”

I’m kind of confused with this. So what exactly is the difference as it relates to a style in using .item:after vs .item::after?

Since I can’t find any correct explanation anywhere, I though I’d ask. :slight_smile:


It makes no difference to styling the element and you just basically use the double notation instead of the single as you have shown. The double colon syntax was introduced in CSS3 to make the distinction between pseudo classes and pseudo elements.

The single notation will work for pseudo-elements defined previously (i.e previous to css3) but pseudo-elements defined in css3 should use the double notation.

The css2 specs explain the difference between pseudo classes and pseudo elements better than me:

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

  • Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).
  • Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ‘:first-child’, which [I]can[/I] be deduced from the document tree, and [URL=“”]‘:lang()’, which can be deduced from the document tree in some cases.

The dot notation is explained here in the css3 recommendations.