Inherit the color and then make it darker / brighter

Question

I have two divs, one of which is .father and the other is.child as follows:

<div class="father">
  <p></p>
</div>

<div class="child">
  <p></p>
</div>

As you can see, the child is not inside the father (sorry if this seems like a dog, the only example blinked to me). What I'm trying to do; when I give .father the background color, let's say "background-color: # 000". I want the child to inherit the color black, but make it brighter / darker ...

I tried to do the following:

.child {
  background-color: -20%;
}

I don’t know if this is true, I think it’s stupid, but I need to share what I did. I also tried to do this using CSS transparency, but this will apply to the whole div ... what if the div has text inside it?

, , div.child div div , div.child, !

, div ? .

Answer 1

, CSS. , , rgba, .

SASS ( LESS) , / . . SASS/SCSS: http://sass-lang.com/

Answer 2

, , .

, ; , .

.father, .child { 
    background-color: red;
}

.child {
    position: relative;
}

.child:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0,0,0,0.2);
}

.child:hover:after {
    background-color: rgba(255,255,255,0.3);
}

, ( , - ,

fiddle