Lighten the Background Colour from Another Class

lighten the background colour from another class

You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:

.master{

      background-color:green;

}

.master2{

      background-color:red;

}

.light,

.dark{

  position:relative;

  z-index:0;

}

.light:before,

.dark:before{

  content:"";

  position:absolute;

  z-index:-1;

  top:0;

  left:0;

  right:0;

  bottom:0;

  background-color:inherit;

  filter:brightness(200%);

}

.dark:before {

  filter:brightness(50%);

}

<div class="master light">Master</div>

<div class="master2 light">Master</div>

<div class="master dark">Master</div>

<div class="master2 dark">Master</div>

CSS use color from another class?

You may also want to look at the new CSS variables in Bootstrap 4. They will let you override colors, but you'll need to redefine the CSS class.

CSS variables offer similar flexibility to Sass’s variables, but
without the need for compilation before being served to the browser.

For example:

.text-teal {
  color: var(--teal);
}

Bootstrap 4 CSS Variables Demo

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

EDIT: Have a look at ScottS's answer for a clever solution that is probably what you need.

That cannot be done in pure css. The reason is that these types of references could lead to 'circular' situations. Or situations where the DOM has to be looped over multiple times to determine the final value. Both these situations are something css always avoids.

Now, if your main goal is to define a 'pallette' of sorts and have all your colors work together, you should look into CSS expansion tools like "SASS" or "LESS". They could let you define colors and change them and do other useful comparison things. Have a look at those tools if you want such flexibility. They cannot however, do direct comparison like you ask, since they just reduce to css in the end.

This can easily be done using JavaScript, and even more easily using jQuery. I wont clutter this answer with JavaScript/jQuery code when it probably isn't what you need.

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

---

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

Lighten color from parent in Less

I am not completely sure what your desired solution would be ... but maybe something like making a mixin would help you from having to write so much stuff out.

LESS:

.bgmixin(@color) {
    (~".@{color}") {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

@blue: #468ACE;
@green: #41A53D;
@red: #9C2525;

.bgmixin("blue");
.bgmixin("green");
.bgmixin("red");

CSS:

.blue{
  background-color: #468ace;
}
.blue .boxbar {
  background-color: #6ea3d9;
}
.green{
  background-color: #41a53d;
}
.green .boxbar {
  background-color: #59c055;
}
.red{
  background-color: #9c2525;
}
.red .boxbar{
  background-color: #c52f2f;
}

---

Update:

In LESS>=1.4 you would want to use something like this to interpolate the class name from the color name:

.bgmixin(@color) {
    @classname: ~"@{color}"; 
    .@{classname} {
        background-color: @@color;
        .boxbar {
            background-color: lighten(@@color, 10%);
        }
    }
}

Output lighter and darker colour variants

It looks like you're generating the method name in the CSS:

So this SCSS

#{$color-type}: #{$color-brightness}($color-name, $percentage);

Becomes this CSS

.background-color-aqua-light-40 {
  background-color: lighten(#00ffff, 20%);
}

To my knowledge, you can't interpolate a SASS method name and get SASS to interpret it. But. I think you can (maybe less elegantly) get around that limitation with the @if and @elseif rules in your @for loop.

@for $i from 20 through 100 {
    @if $i % 10 == 0 {
      $percentage: $i*0.5%;
      .#{$class-name}-#{$i} {
        @if ( $color-brightness == lighten ) {
          #{$color-type}: lighten($color-name, $percentage);
        } @elseif ( $color-brightness == darken ) {
          #{$color-type}: darken($color-name, $percentage);
        }
      }
    }
  }

EDIT: FWIW, I tested the @if/@elseif solution on sassmeister.com and it seems to crank out the CSS you are after.

---

Related Topics