CSS: Using the current text color for other color properties

There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).

Usage

The currentColor value can be used in CSS to indicate the current value of color should be used. A common use case is setting a border color:

a.ghost
  color: white
  border: 1px solid currentColor
  &:hover
    color: red // Border color will change as well

Note that in many cases, you can simply omit the color to achieve the same result (i.e. in the example, simply write border: 1px solid).

caniuse.com

Dominik Schöler

makandra.de

Say thanks2

Last edit

2018-05-22

Dominik Schöler

License

Source code in this card is licensed under the MIT License.

CSS: Matching against attributes and their values (or parts of them)

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" *...

Posted by Dominik Schöler to makandra dev (2018-05-14 13:14)

CSS: Using the current text color for other color properties

Usage

Related cards:

Basic usage

Introduction

tl;dr

Be careful! The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.