css - Lighten parent's (unknown) background-color in child

Question

Is there a way in less or (css3 in general) to access parent's background-color without knowing it?

Something like:

.child-class {
    background-color: lighten(parent-background-color, 30%);
}

A less variable would be the obvious approach but in this case I simply don't know the parent's background-color as it can be dynamically styled.

Anybody got something in her trick box to help out?

Answer 1

You Can Achieve the Effect

Technically the answer "no" is correct. However, because we are talking about "lightening" (or "darkening"), that is, adding white or black, then the effect can be achieved still through either css3 rgba() colors or opacity on a pseudo element. Consider these (each would be used on the child element):

Opt #1: CSS3 rgba

.lighten {
    background-color: rgba(255, 255, 255, 0.3);
}

Opt #2: CSS2 Pseudo-element with opacity

.lighten{
    position: relative;
    z-index: 0;
}

.lighten:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: #fff;
    opacity: 0.3;
}

See an example fiddle showing both options