I don't often think to post tips on using HTML/CSS anymore, partly because they are more than likely already out there and partly because it is such a stale and dull way of generating content on a website, (second only to posting 'best of' lists). Sometimes though, the odd discovery warrants an entry, if only for personal reference.
Using pseudo selectors to generate content after elements, I noticed that Safari, (2.0.4) would more often than not fail to generate content if a 'last-child' rule was applied to the element as well.
ul li:after { content: " | "; }ul li:last-child:after { content: ""; }The CSS above would quite often result in all of the list items losing their 'pipe'. However, if the code is changed to target the first child and apply the content before the element, the problem disappears.
ul li:before { content: " | "; }ul li:first-child:before { content: ""; }I have no idea why this happens, and no idea if this will be solved for the next release of Safari, (or even in the nightly builds), but it seems to solve an irritating little problem that pops up from time to time, (on the archives page of this very site, for example).
The entry ‘Safari and the First/Last Child’ was posted in the ‘long’ category on the 10th April, 2007.
There are no comments on this entry.
A randomly selected something that you might enjoy. I may have been involved with some of them.
There are a number of RSS feeds that you can subscribe to if you want to stay up to date with this site.