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
Pseudo elements work like this:
li::last-child { margin-right: 0; }That works great in all browsers, but does not work when combined with other 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 🙂
Source: Security Feed