How to “add details” to CSS (example Box shadow)

Question

I'm making a navigation bar and essentially I have box-shadows on the bottom, left (first-child) and right (last-child).

My structure is <ul><li><a><span>

I have box-shadows on the bottom for ul li a { 0 1px 0 0 green }, and want to add box-shadow on the sides for the first and last element ul li:first-child a { -1px 0 0 0 red }. However, the box-shadow property is being overridden with the :first-child selector... is there a way I can say "add -1px 0 0 0 red to the previous box-shadow style".

Hope I'm making sense. Here's a demo: http://jsfiddle.net/LJj2p/

Thanks!

Answer 1

No. You cannot add a box-shadow to something that has one, as it will overwrite it (or, more specifically, the one with the higher specificity wins). You need to define both shadows at one time for the :first-child / :last-child case.

However, using a pseudo-element you can effectively "add" a shadow, though it is not truly adding it.