Why are there two colons here? span::before
css, css-selectors
Solution
It's a pseudo-element, as defined by the CSS Selectors Level 3 spec:
The `::before` and `::after` pseudo-elements can be used to describe generated content before or after an element's content.
It is effectively the same as the single-colon syntax defined by the level 2 spec. The level 3 spec introduces an extra colon to differentiate between pseudo-elements and pseudo-classes (which use a single colon).
Both syntaxes will work in newer browsers, but older browsers will not recognise the newer `::` style.
For even more detail, you can look at the grammar from the level 3 spec, which states:
'::' starts a pseudo-element, ':' a pseudo-class
Problem
This is the full line of code I'm looking at, and here is its context: http://acidmartin.wordpress.com/2011/02/24/custom-crossbrowser-styling-for-checkboxes-and-radio-buttons ``` input[type="radio"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("sprite.png") no-repeat -20px 0; vertical-align: middle; } ``` I have a decent understanding of how this works, but I don't understand why there are two colons, rather than one between span and before. The before selector, from what I've read should use one colon. http://www.w3schools.com/cssref/sel_before.asp On w3c, I can't find any selectors that have two colons, nor can I figure out why span would have a colon following it, in addition to the colon preceding "before". http://www.w3.org/TR/CSS2/selector.html