Home/ Questions/Q 8833593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:49:03+00:00

This is the full line of code I’m looking at, and here is its

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0