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

Tags: css,attributes,add,css3,details

Problem :

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:


Solution :

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.

    CSS Howto..

    Responsive portrait images, Hows & Dont's?

    How can I position an element in the middle of the window while using position: absolute?

    How to give border a single border for two adjacent cells in css

    Showcase Image and Carousel Caption

    How to calculate CSS letter-spacing v.s. “tracking” in typography?

    How to style a dynamic html created by PHP

    how to repeat a small background image througout the page?

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How can I make a div auto-adjust its height between two divs, according to window height using CSS/Javascript?

    How To Include CSS and jQuery in my wordpress plugin?

    How to Make a Dropdown In a Navbar Using CSS?

    how to add a margin on both sides and center the text in a paragraph?

    CSS How to make text to scale like an image

    How to Target Twitter Bootstrap <768px and 480px Breakpoints

    How make to flow around a triangular block?

    How to include display:block in css code that includes pseudo element 'before'

    How to apply css for anchor tag inside table

    How to make a CSS scroll follow div stop follow at a position

    How to position text on a baseline?

    looking for a good explanation on how html gets rendered and how css effects it [closed]

    How to reset jQuery toggled classes applied throughout the page? (AngularProject)

    How can i create a hexagon shape with an image inside? [duplicate]

    How do I apply css to only IE 8 and below

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    change of encoding shows Weird symbols

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How can I position list in

    How to right align a div containing a form in another div?

    How to give an element with an id a certain CSS property if it has a class?