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
It means pseudo element selector. It means the element to the right doesn't exist in the normal DOM, but can be selected.
Note the double-colon ::before versus the single-colon :before . Which one is correct? Technically, the correct answer is ::before . But that doesn't mean you should automatically use it.
::before (:before) In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
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
You can read an article about it here
But basically it is to differentiate between pseudo classes and pseudo elements. It is a css3 standard to use two colon's for a pseudo element, as oppose to the CSS2 standard of just one.
One or two colons will work as browsers want to cater to both CSS2 and CSS3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With