Take another element’s background-color

Question

It’s boring to keep changing the background color of various objects, I want to know if there’s any way I can define the color of an object and then just match the color of others with the color of that object, to make something dynamic, change the color of all at the same time and in the code I only indicate the color in one. Example, I have a div.teste define your color as blue.. how do I make other Ivs and other tags take the same color from div.test without having to go out assigning blue to everyone.

Answer 1

Using only CSS, I don’t see any solution outside the suggestions they gave in the comments: Use a class containing the specific rules that the element should have.

But I think that still would not be what you are looking for, would not be dynamic, even because CSS has no events and you will not be able to control the "change" in an element.

Then, I would use Javascript to get the color of the element and assign it to others. The control of "who is the target element?" and "who are the elements that will be affected?" can we do with data Attributes. For example:

(function(){
  
  var backgroundColor = document.querySelector('[data-parent]').style.backgroundColor,      
      targets = document.querySelectorAll('[data-target]');
  
  for(var i = 0; i < targets.length; i++)
    targets[i].style.backgroundColor = backgroundColor;  
  
})();

<div data-parent style='background-color:blue'>Eu sou azul :)</div>

<hr>

<div data-target>Eu serei afetado.</div>
<div data-target>Eu também.</div>
<div>Eu não.</div>
<div data-target>Eu sim.</div>

Dynamic example

(function(){
  
  document.querySelector('button').addEventListener('click', function(){

    setRandomParentColor(); // Altera a cor do 'data-parent'
    
    setTargetsColors(getParentColor()); // Pega a cor do elemento e altera todos os 'data-target'
  });
  
  
  /**
   * Gera uma cor randomica e altera a cor de backgroundd
   * do elemento com atributo 'data-parent'.
   *
   * créditos - @ZPiDER: http://stackoverflow.com/a/5365036/4056678
   */
  function setRandomParentColor(){
    var color = "#"+((1<<24)*Math.random()|0).toString(16); // cor "randomica"
    document.querySelector('[data-parent]').style.backgroundColor = color;
  }
  
  
  /**
   * Obtém a cor do elemento com atributo 'data-parent'.
   */
  function getParentColor(){
    return document.querySelector('[data-parent]').style.backgroundColor;
  }
  
  
  /**
   * Altera a cor de background de todos os elementos
   * com atributo 'data-target'.
   */
  function setTargetsColors(color){
    
    var targets = document.querySelectorAll('[data-target]'),
        len = targets.length;
    
    for(var i = 0; i < len; i++)
      targets[i].style.backgroundColor = color; 
  }
  
  setTargetsColors(getParentColor());
  
})();

<div data-parent style='background-color:blue'>Eu sou azul :)</div>
<button>Mudar cor</button>

<hr>

<div data-target>Eu serei afetado.</div>
<div data-target>Eu também.</div>
<div>Eu não.</div>
<div data-target>Eu sim.</div>
<div>Eu também não.</div>

Answer 2

You can try using background-color:inherit set the background-color for the parent element...and in the child elements put this property so that they inherit from the parent element. You can create a div with main and put other Divs in, ex:

<div id="principal" style="background-color:#CCC">
  
  
  
  
  <div id="div1" style="background-color:inherit">
    
    
    </div>
  
  
  
  
  <div id="div2" style="background-color:inherit">
    
    
    </div>
  
   
  
  
  </div>

In case you would need to change only the main div...because the others would inherit the property, Voce can also do in css this way:

div[name=colorir]{

  background-color:#CCC;

}

Then just name the Divs you want to change the background with the name colorize