33

I'm researching css and typography, and ran into this intriguing concept of pseudo-selectors. I have used single colon psuedo selectors and am unfamiliar with the double colon version of the psuedo selectors. I understand that double colon is called a pseudo-element instead of a pseudo-selector - but why? And what is the difference?

I also understand that single colon is much more supported, so in what situation would one use the double colon pseudo-element? Are there use cases where double colon would be necessary, and single colon would not get the job done? what might that situation be?

"Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain." (quote from link) - I don't know what 'selector chain' is, but this also seems like yet another limitation of the double colon approach. Why would I need to use double colon if it is (in my understanding) just a less supported version of single colon?

edit: they appear not to be functionally the same: fiddle

<div><p>First Line</p></div>
<div><p>Second Line</p></div>

css

div:nth-child(1) > p { 
    color: green;
}

div::nth-child(2) > p { 
    color: blue;
}
SurvivalMachine
  • 7,946
  • 15
  • 57
  • 87
J-Dizzle
  • 3,176
  • 6
  • 31
  • 49
  • 1
    As [MDN states](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements): "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." – j08691 Apr 20 '15 at 17:39
  • According to https://developer.mozilla.org/en/docs/Web/CSS/:nth-child nth-child is a pseudo-class selector so you should use single colon, not doble colon (because it is not a psedo-element selector). – José Cabo Apr 20 '15 at 17:43
  • 1
    Why are you calling them psuedo-selectors when the documentation calls them pseudo-classes? – Mr Lister Apr 20 '15 at 17:45
  • @Mr Lister: I suspect their use of the term is exactly why this question came to be. – BoltClock Apr 21 '15 at 07:23

1 Answers1

61

Pseudo-classes (:) allow you to style the different states of an element e.g. when you hover over it, when it is disabled, when it is the first child of its parent, etc.

Pseudo-elements (::) allow you to style different parts of an element e.g. the first line, the first letter, inserting content before or after, etc.

Originally they all used a single colon, but CSS3 introduced the double colon to separate the two.

scronide
  • 12,012
  • 3
  • 28
  • 33
  • 2
    There is no problem with inserting content with single colon pseudo. – Stickers Apr 20 '15 at 17:49
  • Browsers may support single colons for some pseudo-elements because that is how they were defined in CSS2. On the other hand, no browser should allow double colons for pseudo-classes because they were never defined that way. – scronide Apr 20 '15 at 17:51
  • 1
    So while I can't use `:` and `::` the same way (`::` will fail with e.g. `::hover`) , I could use `:` in any situation? – J-Dizzle Apr 20 '15 at 18:02
  • 5
    Until they introduce new pseudo-elements, yes, a single colon should work fine in most cases. – scronide Apr 20 '15 at 18:16
  • @scronide They already have introduced new pseudo-elements! The CSS3-only `::selection` pseudo element only works with a double colon; see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements). To demonstrate, I made a [fiddle](http://jsfiddle.net/MrLister/o709h2oe/) where if you remove one of the colons, it no longer works. – Mr Lister Apr 21 '15 at 07:24
  • @J-Dizzle No, you should just use : pseudo-selector for pseudo-classes and :: pseudo-selector for pseudo-elements, as they are both specified. It is not a matter of use "anything you want" but using them as specified. CSS3 specification say you should never use ::nth-child (with :: instead of : ) because it has never been specified in that sense. – José Cabo Apr 21 '15 at 07:39
  • If you're going to talk about specifications, note that with the exception of some early drafts the spec has never once used the term "pseudo-selector" - perpetuating that term for any part of the syntax only serves to add to the confusion. – BoltClock Apr 21 '15 at 07:43
  • 1
    For usage guidelines, see http://stackoverflow.com/questions/17684797/should-i-use-single-colons-or-double-colons-for-before-after-first-le – BoltClock Apr 21 '15 at 08:02
  • 1
    @BoltClock You are right. In accordance with the CSS3 specification pseudo-classes *:selector*, (i.e. *:hover* or *:nth-child(2)*) and pseudo-elements *::selector* (i.e. *::after* or *::first-line*) they are both considered just as *selector* (or part of). Anyway, this question from the author mean that he completely misunderstood the meaning of *:* and *::* **selectors**. – José Cabo Apr 21 '15 at 09:46
  • @MrLister Aye. FWIW `::selection` was bumped from CSS3 and pushed to CSS4, joining a few other new pseudo-elements. – scronide Apr 21 '15 at 19:06
  • Sticking to the CSS2 spec is perfectly valid and helpful if the author intends to support IE8 or earlier. – scronide Apr 21 '15 at 19:09
  • @scronide: Pseudo-elements 4 is part of CSS3, because CSS3 is supposed to mean "anything that comes after CSS2". If anything, what confuses *me* personally is why Pseudo-elements starts at level 4 and not level 3, but perhaps it's because like you said ::selection originally appeared in Selectors 3 before being deferred to 4 - before being moved to an altogether separate Pseudo-elements module. Anyway, I digress... – BoltClock Apr 22 '15 at 06:25
  • are psuedo elements children of the DOM? what exactly are they children of if anything at all? are they part of the shadow DOM??? – oldboy Mar 24 '19 at 06:39