TIL that it's ::before, not :before

POSTED ON: Jan 04, 2022

TAGS: css

The actual specs:

The syntax of a pseudo-element is "::" (two U+003A COLON characters) followed by the name of the pseudo-element as an identifier. Pseudo-element names are ASCII case-insensitive. No white space is allowed between the two colons, or between the colons and the name.

The W3C proposals and standards
https://drafts.csswg.org/selectors-4/#pseudo-element-syntax

Via the blog post:

When I asked colleague more experienced than myself, I remember them saying, “they’re both valid”. So I just assumed it was a kind of syntactic sugar, both being acceptable.

Fast forward a few years, I remember reading an article stating that single-colon notation was some kind of backwards-compatibility artifact of the standardization process. Both were valid, but double-colon was “more right”.

So what should you be using? Unless you time travel, double-colon.

/* CORRECT: CSS3 syntax */
::before

/* INCORRECT: CSS2 syntax */
:before

[Chris Coyier]: We covered this a few years back as well. The only reason you’d use the single-colon syntax is if you’re needing to support IE 8. The deepest people tend to go these days is IE 11, but it’s more common not to support IE at all. So yeah, double colon for sure.

REFERENCE:
Hairsplitting the Pseudo-Element Syntax
MDN - ::before
CSS-Tricks

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

Mar 18, 2023

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

Mar 11, 2023

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')

Mar 02, 2023

Next: TIL Writing really good alt textOne way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.
Previous: TIL converting Booleans to NumbersThis helper is great for APIs. Not every language parses true/false the same. But every language knows that 0 is false, and 1 is true.