CSS adjacent sibling selectors, Safari and <nav> elements

Question

In Safari 5.1.3 I have just noticed that, when writing a CSS adjacent sibling selector (er the + one) and when referencing a <nav> element - the browser fails to honor the CSS.

So:

h1 + p { ... } /* works fine */
h1+p { ... } /* works fine */

and

h1 + nav { ... } /* works fine */
h1+nav { ... } /* but, does NOT work */

I've tested these with other html 5 elements (section, article, aside) and they seem to work fine. Until you put a nav element into the mix; then it breaks. Here is a jsfiddle.

This is proving frustrating as my rails asset packer is minifying the css and taking out unnecessary spaces. This isn't an issue for IE7, Firefox, Chrome or Opera - but Safari 5..

Anyone else had similar? Know why? Know a way to fix?

Answer 1

This is definitely a Safari bug and you should report it using Safari > Report Bugs to Apple... on a Mac or Help > Report Bugs to Apple... on a PC (or the toolbar button if it's displayed on your Safari toolbar).

The easiest way out of this is to disable CSS minification if Asset Packager has an option for it.

If it doesn't have such an option, there exists a quick and dirty workaround: if you only have one nav element directly following your h1, you can use the general sibling selector ~ instead as Safari doesn't appear to have any problems with it:

h1 ~ nav { ... } /* works fine */
h1~nav { ... } /* works fine */

jsFiddle preview

If you have multiple nav elements following your h1, you'll have to override the styles manually for the successive nav elements using h1 ~ nav ~ nav.