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.