CSS: Odd Bug with Colons and Combined Pseudo Elements

According to specification (and these helpful posts by Chris Coyier), CSS pseudo elements like ::before and ::after should be written with two preceding colons. It can be confusing because while pseudo elements are prefixed by two colons, like ::element, pseudo selectors (aka pseudo classes) are prefixed by only one, like :selector. So that’s the context for an odd little CSS bug..

Odd CSS bug

Many browsers continue to support the double-colon prefix for pseudo-elements pseudo-selectors, for example:

li::last-child { margin-right: 0; }

That works fine in most browsers, but does not work when combined with pseudo elements like ::before and ::after. So if you do this:

li::last-child:after { content: ''; }

..it won’t work. And likewise using the double-colon syntax :: for both selectors, for example like this:

li::last-child::after { content: ''; }

Also doesn’t work. For some reason, at least with webkit browsers (e.g., Chrome, Opera, Safari, and many others), in order to combine pseudo elements, you need to use the single-colon syntax for the first element:

li:last-child:after { content: ''; }

..works as expected. Interestingly enough, this works as well:

li:last-child::after { content: ''; }

The take home message: if you’re combining pseudo elements, the first pseudo element must be single-colon prefixed. It doesn’t matter (apparently) on the second pseudo element.

To help visualize slash summarize all of this, I put together a simple demo for combined pseudo elements »

Not sure if that is reason enough to stick with single-colon syntax on pseudo elements or not. Maybe it’s a bug? After reading Chris’ article, I wanted to be consistent and use double colons everywhere. But I also need to use combined pseudo elements once in awhile. So do I use both single and double colons? Or stick with single-colon syntax because it always works? Or stick with specification and use only double colons, thereby forfeiting use of any combined pseudo selectors?

Any thoughts or insights welcome :)

About the Author

Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.