Question

I've found that using a single colon with the pseudo tag first-line works fine. Why is a double colon used for this tag and is it really needed?

From WC3 Schools:

p::first-line 
{
color:#ff0000;
font-variant:small-caps;
}

But this works fine:

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

http://www.w3schools.com/css/css_pseudo_elements.asp

Was it helpful?

Solution

As MDN states:

In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.

As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.

If legacy browsers must be supported, :first-line is the only viable choice; if not, ::first-line is preferred.

Further, as the W3 states:

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

OTHER TIPS

MDN for ::first-line (:first-line)

CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.

The situation on ::before and ::after are pretty much the same.

CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2.

You might ask:
What's the difference between Pseudo-classes and Pseudo-elements?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top