CSS3 pseudo selectors have a lot of power. Lately I have been playing around with :not(), :nth-child() and :nth-of-type(). One thing that I discovered while working on table row striping is that :nth-of-type() and :nth-child() ignore / override :not(). I was trying to stripe all of the odd rows in a table. That's easy to do with table tbody > tr:nth-of-type(odd) > td but I wanted the striping to ignore rows that had a class nostripe. So I thought that something like this would work table tbody > tr:not(.nostripe):nth-of-type(odd) > td . It didn't work I tried various selector combinations with no luck.

• table tbody > tr:not(.nostripe):nth-of-type(odd) > td
• table tbody > tr:nth-of-type(odd):not(.nostripe) > td
• table tbody > tr:nth-child(odd):not(.nostripe) > td
• table tbody > tr:not(.nostripe):nth-child(odd) > td

Here is a quick demo on jsFiddle,.

It seems once you use :nth-of-type() or :nth-of-type() with :not() the :nth-of-type() or :nth-of-type() will override the :not() even it comes before them. This is quite frustrating because if you use those selectors in jQuery it comes back with the results you would expect. So I settled on a class based solution where every odd row gets a class of stripe. This isn't ideal but it will have to do until there is another css only solution.