CODEWITHSUNDEEP
csscss-selectors
Eric
Eric

Reputation: 2034

Why are there two colons here? span::before

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

Upvotes: 33

Views: 12093

Answers (3)

J A.
J A.

Reputation: 1346

double-colon selectors are pseudo-elements. single-colon selectors are pseudo-selectors.

Upvotes: 1

James Allardice
James Allardice

Reputation: 165971

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

Upvotes: 54

Andy
Andy

Reputation: 14575

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

Upvotes: 7

Related Questions