Inherit colour and then make it darker/brighter

Question

I have two div's one is .father and the other one 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 doggy, the only example blinked to me). What I am trying to do; is when I give the .father a background colour lets say "background-color: #000". I want the child to inherit the colour black BUT make it brighter/darker...

I have tried to do the following:

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

I don't know if that is a real way, I guess it's stupid - but I need to share what I did. I have also tried to do it using CSS transparency but that will be applied to the whole div... what if the div has text inside it?

So for example, I wrap the div .child with another div and give that div a black background, then apply transparency to the div .child - but this will apply transparency to the text as well!

If I have added a around the how can I make that span inherit the colour of the div inside it? and inherit its size as well.

Answer 1

I'm afraid you cannot do that in pure CSS. Unless of course you work with rgba colors to make it transparent.

There is however a function in SASS (and LESS) that allows to darken/lighten colors. Take a look at these function's reference here. More information about SASS/SCSS: http://sass-lang.com/

Answer 2

You can set for the child background the same color that for the father, and set a semitransparent pseudo element over it.

If the background of the pseudo element is semi-transparent white, the background-color gets lighter; if the pseudo element is semitransparent black, the child gets darker.

.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);
}

In this example, the child gets darker red, but turns to lighter red when hovered (and works the same if the base color is whatever you want

fiddle