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..

    How to make css opacity property not to be inherited from parent div´s?

    How to implement Read more / Read less in pure CSS

    How to serve css files in djangos's flatpages?

    How to add a Delay on Bootstrap Dropdown Hover

    How to change CSS id property depending upon screen size

    How to force text to wrap inside inline-block div?

    How to Set Banner-Like Background Image With CSS

    How can I get my rows 100% wide?

    Show 100% of background

    How to display UpdateProgress at the center of a grid view with CSS?

    How to center an image in an img tag using CSS background position

    How to show/hide big image by clicking on thumbnails?

    How can the common text message format be replicated purely with CSS?

    How to generate width CSS from JavaScript / C#

    How to fix error from posting html element and prevent it from running

    Align lists on showing or hiding

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How to Prefix this Input element, using CSS

    How to start a css animation from current position

    How can I make this section of my webpage responsive? [closed]

    how to show different image in div per the screen size?

    How to figure a text box set of characters into a text box figure 2 effect?

    How to prevent opening a link of the submenu when tapping the menu?

    How to get the ultimate, final calculated style value on an HTML element?

    How to use relative/absolute paths in css URLs?

    How to make a background using CSS gradient with flat color?

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    When a CSS selector matches N elements, how to get only the one at a certain index?

    How to change the CSS of entire page/website on click?

    How to center text vertically in a flex box?