Skip to Navigation

Safari and the First/Last Child

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.

  1. ul li:after { content: " | "; }
  2. 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.

  1. ul li:before { content: " | "; }
  2. 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).

Leave A Comment

Some HTML is allowed, (general text-formatting and linking). Images and complex HTML is not. Abide by the rule ‘I shall think before I speak’ and you’ll be fine.


More About This Entry

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.

You Might Like This

A randomly selected something that you might enjoy. I may have been involved with some of them.

Flickrshow


Stay Up To Date

There are a number of RSS feeds that you can subscribe to if you want to stay up to date with this site.