Different CSS Setting for Each Navigation Link

This css trick was applied to a website build where I needed background images tabs to overlay one another, so that the next tab’s z-index was lower than the first one causing the background image to be behind the one to the left of it. My first thought was to use :nth-child to assign the descending z-index, but this is not fully supported on IE8. So I found a solution on css-snippets.com.


So rather than using:

#primary_nav li:nth-child(1) a { z-index:99; }
#primary_nav li:nth-child(2) a { z-index:98; }
#primary_nav li:nth-child(3) a { z-index:97; }
#primary_nav li:nth-child(4) a { z-index:96; }
#primary_nav li:nth-child(5) a { z-index:95; }
#primary_nav li:nth-child(6) a { z-index:94; }
#primary_nav li:nth-child(7) a { z-index:93; }

I changed it to:

#primary_nav li a { z-index:99; }
#primary_nav li+li a { z-index:98; }
#primary_nav li+li+li a { z-index:97; }
#primary_nav li+li+li+li a { z-index:96; }
#primary_nav li+li+li+li+li a { z-index:95; }
#primary_nav li+li+li+li+li+li a { z-index:94; }
#primary_nav li+li+li+li+li+li+li a { z-index:93; }

Both do exactly the same thing, but allows support for IE8, and the slight overlapping of the tabs that I wanted.

Scroll to Top