Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 542
Eric Avatar asked Nov 15 '12 15:11

Eric


People also ask

Which feature uses :: double colon?

It means pseudo element selector. It means the element to the right doesn't exist in the normal DOM, but can be selected.

Is it :: before or before?

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.

What is the use of :: before?

::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.

What are :: after and :: before?

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.


2 Answers

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

like image 198
James Allardice Avatar answered Oct 11 '22 10:10

James Allardice


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

like image 41
Andy Avatar answered Oct 11 '22 10:10

Andy