Difference between : and :: in CSS

Question

What exactly is the difference between : and :: in CSS?
For example, I see CSS code like:

.example:before{
   content:'just one';
}

and

.example2::before{
   content:'here two';
}

What is the difference? What is best practice?

Answer 1

Pseudo-classes

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.

ref: http://www.w3.org/TR/css3-selectors/#pseudo-classes

Pseudo-elements

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. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

ref: http://www.w3.org/TR/css3-selectors/#pseudo-elements

We typically used to use just a single colon for everything, but now the best practice is to follow the W3C's guidelines, though I would add a caveat that you want to ensure the browsers you are supporting understands the syntax before you start making wholesale changes to your stylesheets.