This content originally appeared on Perishable Press and was authored by Jeff Starr
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 :)
This content originally appeared on Perishable Press and was authored by Jeff Starr
Jeff Starr | Sciencx (2021-06-29T22:54:43+00:00) CSS: Odd Bug with Colons and Combined Pseudo Elements. Retrieved from https://www.scien.cx/2021/06/29/css-odd-bug-with-colons-and-combined-pseudo-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.