Modify a particular box-shadow within a list of box-shadows using CSS

Is there a way to override one specific value in the box-shadow list while preserving all other values? For example:

div{
    box-shadow: 0 0 0 5px #00ff00 , 0 0 0 10px #ff0000 , 0 0 0 15px #0000ff ; 
}

If we only want to change the second value without losing the others, it seems like we have to copy-paste the entire list. Using 'auto' or 'inherit' doesn't work for this purpose.

Can this be achieved using just CSS, or do we need to resort to jQuery or JavaScript's getComputedStyle method?

View the playground here: http://jsfiddle.net/cherniv/uspTj/5/

P.S. This issue may also apply to multiple background images lists.

javascripthtmlcss

Answer №1

This solution is not a universal fix for all cases, but rather a clever workaround specifically designed for your fiddle:

div{
    box-shadow: 0 0 0 5px green,  0 0 0 10px #ff0000 ,  0 0 0 15px blue;    
    position: relative;
}

div:nth-of-type(2):after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: -5px;
    box-shadow: 0 0 0 5px yellow;    
}

See demo here

To achieve multiple shadows on an element without overlapping, I've created a pseudo-element to hold the second shadow and set a negative margin to offset it from the first shadow.

Check out another demo where you can change the values through JavaScript:

View demo2

The script used in the demo is as follows:

function change () {
    // Function logic here
}

// Additional functions used in the script
... (omitted for brevity)

document.onkeydown = function (e) {
    e = e || window.event;
    switch(e.which || e.keyCode) {
        case 37:
            change ();
            break;
    }
}

This script retrieves the current box-shadow properties of an element, fetches the desired override from a data value, recalculates the result considering possible 'inherit' values, and updates the element with the new box-shadow configuration. You can activate the demo by pressing the left arrow key.

Answer №2

According to the current CSS rules, overriding a single value of a multi-value attribute is not feasible.

To work around this limitation, you must redefine the 1st and 3rd shadow values in a separate rule:

div{
    box-shadow: 0 0 0 5px #00ff00 ,  0 0 0 10px #ff0000 ,  0 0 0 15px #0000ff ; 
}

div:nth-of-type(2){
    box-shadow: 0 0 0 5px #00ff00 ,  0 0 0 10px #abcdef ,  0 0 0 15px #0000ff ; 
}

A communication on the W3 mailing list hints at the possibility of addressing this issue:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Aligning an element in the middle of an image vertically

Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...

htmlcss

How can I direct to an HTML file using Vue 3 router?

I'm working with Vue 3 and I have a unique challenge. I want to connect a static landing page HTML file to the home route / in my Vue application, but this HTML file is completely separate from the original index.html used by Vue 3. This standalone HT ...

javascriptvue.jsvuejs3

Move the DIV from the left side with a nice slide

I'm working on using a basic div (leftContainer) and want to create an effect where it slides from the left to its full width when the page loads, without requiring a button click. Below is my code snippet: <div class="leftContainer "> <div ...

jqueryhtmlslide

Is there a way I can create an object in JavaScript by using an array of values as parameters instead of having to manually list them out?

Can I achieve this? My goal is to develop a universal factory function that can generate different types of factories with some commonalities. I aim to pass arguments as an array to the base factory, which would then potentially create a new object instanc ...

javascriptoopfirefox-addonnew-operatorapply

Classes that are designed to be written on a single

A fellow team member recently made an addition to our project. <ol class="numbered-list list-inside" start="1"> .numbered-list { list-style-type: decimal; } .list-inside { list-style-position: inside; } Is there a problem with this code, ...

css

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

javascriptcssangularanimation

Discovering ways to verify if an array is empty within JSON data using JMESPath?

I am presenting JSON data that looks like this: [ { "id": "i_1", "name": "abc", "address": [ { "city": [ "city1", "city2" ] }, { "city": [ "city1", "city2" ...

javascriptjsonjmespath

Rest parameter ...args is not supported by Heroku platform

When interacting with Heroku, an error message SyntaxError: Unexpected token ... appears. What modifications should be made to this function for compatibility with Heroku? authenticate(...args) { var authRequest = {}; authRequest[ ...

javascriptnode.jsheroku

React useEffect appended script not activating

I'm having trouble loading a script that should generate an iframe and display a weather widget upon trigger. I am able to append the script correctly, but it doesn't seem to be called and does not create the iframe. Even when I directly add the ...

javascriptreactjsreact-hooksuse-effect

the buttonclick won't pause the timer

I'm having trouble with the timer function when a button is clicked. The startpause() method sets the start and stop timers, but when I click the button rapidly multiple times, the timer starts to jump by 2-3 seconds. It seems like more than one timer ...

javascripthtml

Suggestions for coding projects incorporating C, XML, JavaScript, and the Windows 32 Application Programming Interface

Just a little curious here. I will be embarking on my first job at a different company and thought about developing a sample program beforehand to get comfortable with their system. I was informed that I will be working with C/C++ and should have knowledge ...

javascriptc++cxml

Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Currently, I am developing an angular web application that needs to be compatible with IE10. One of the requirements is to make a cross-domain call to our enterprise salesforce server. When using Chrome (not officially supported but commonly used for devel ...

javascriptajaxangularjscorsinternet-explorer-10

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

javascriptcssvideothree.js

Issues with getting full HTML content using selenium for web scraping

My task is to extract the discounted price of a product from a specific website. Upon inspecting the website, I found the following HTML structure: https://i.sstatic.net/LerWE.png This is what my code currently looks like: browser = webdriver.Chrome(exe ...

htmlselenium-webdriverxpathcss-selectorswebdriverwait

Streamline the organization of parent roles

var classFinder = $('.frame').parent().parent().parent().parent().parent(); if (classFinder.hasClass(".class")) { return true; } I have identified a class along this specific path^... Is there a way to streamline this process ...

javascriptjqueryasp.netdomloops

Encountering an error message related to Bootstrap carousel: "Unable to read property 'offsetWidth' of undefined"

Encountering a frustrating error message: "Cannot read property 'offsetWidth' of undefined" when using Bootstrap carousel. Let me share my code with you: <div id="myCarousel" class="carousel slide" > <ul class=& ...

javascriptcssbootstrap-4

Enhance your browsing experience with Fire-fox add-on that automatically triggers JavaScript after YouTube comments have

I am currently working on creating an add-on for the Firefox browser. I have implemented a page-mod that triggers a script when specific pages (such as Youtube) are loaded, allowing it to communicate data back to the main script. However, I am encountering ...

javascripthtmlajaxfirefox-addon

What is the approach for capturing system or website sound using JavaScript?

After creating an online drumkit and guitar player, I am now looking to enhance my website by adding a feature that allows users to record their sessions and download them. Since I am new to web development and familiar only with HTML, CSS, JavaScript, and ...

javascripthtmljquerycssaudio-recording

Do hooks get executed during every render phase?

Currently, I am utilizing the context API and hooks in my project. I have a total of 20 state variables, and every time one of them changes (resulting in setting states), the function is called again or re-renders. This has raised some concerns for me in t ...

javascriptreactjsreact-nativereact-hooks

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

javascripthtmlformsvalidation