6

I'm seeing this usage a lot. Specially with the pseudo classes. What does "::" means in CSS?

.a_demo_three::before {
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Mia
  • 6,220
  • 12
  • 47
  • 81

1 Answers1

8

From the MDN:

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

So, when you want to use pseudo-classes like :hover, :first-child etc, use a single colon. If you want to use pseudo-elements, like ::before, ::after, ::first-letter and so on, use double colons.

One more note: the W3C states that browsers should only accept the :: notation for pseudo-elements introduced in CSS 3, so you should follow the recommendations above :)

nice ass
  • 16,471
  • 7
  • 50
  • 89
  • what is the difference between `:first-child` and `::first-letter` they both point to elements, what am I missing? – Itay Moav -Malimovka Feb 06 '13 at 02:26
  • 1
    which browsers follow this strictly? do any fail to work with `::`? – bevacqua Feb 06 '13 at 02:27
  • I don't think so, but I remember that the `placeholder` element required `::` in older FF/Chrome versions. @Itay `first-letter`will target the first letter of the element, not the first element – nice ass Feb 06 '13 at 02:29
  • Still, it targets a real element, while :hover is an event...and it is Itay, no L ;-) – Itay Moav -Malimovka Feb 06 '13 at 02:30
  • Ok - went over the docs. `::first-child` is definitely part of the "pseudo-elements" : describes states (events) and :: real elements, which are always there. – Itay Moav -Malimovka Feb 06 '13 at 02:37
  • It's not. `first-child` describes the state too, ie. the element is currently the first child of X. While `first-letter` describes a "virtual" element that should always be there – nice ass Feb 06 '13 at 02:41
  • and what user action would I do on the page to change that state of first-child? – Itay Moav -Malimovka Feb 06 '13 at 02:57
  • You could move the element around with javascript. That's not possible on pseudo-elements – nice ass Feb 06 '13 at 02:59
  • Thank you for the reply, and great discussion going on here! – Mia Feb 06 '13 at 04:06
  • @One Trick Pony: Only Firefox required double colons - it's changed to a single colon as of version 19 I believe. Chrome has always used a single colon. – BoltClock Feb 06 '13 at 07:27
  • @Itay Moav -Malimovka: `:hover` is *not* an event, it's a *state*, just like `:first-child`. Events and states are two very different things; see [this answer](http://stackoverflow.com/questions/11703241/does-css-have-a-blur-selector-pseudo-class/11703334#11703334) for more. `::first-letter` is a virtual element that's created as a "child" of a real element. – BoltClock Feb 06 '13 at 07:28
  • @Nico: IE8 and older do not understand the double-colon syntax. If you must support older browsers, use single colons for `:first-letter`, `:first-line`, `:before` and `:after`. If you don't need to, use double colons as recommended by W3C. – BoltClock Feb 06 '13 at 07:32