CSS color actual


Ejemplo

currentColor devuelve el valor de color calculado del elemento actual.

Utilizar en el mismo elemento

Aquí currentColor se evalúa en rojo ya que la propiedad de color se establece en red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

En este caso, la especificación de currentColor para el borde es probablemente redundante porque omitirlo debería producir resultados idénticos. Solo use currentColor dentro de la propiedad de borde dentro del mismo elemento si de lo contrario se sobrescribiría debido a un selector más específico .

Ya que es el color computado, el borde será verde en el siguiente ejemplo debido a que la segunda regla anula la primera:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Heredado del elemento padre

El color del padre se hereda, aquí currentColor se evalúa como 'azul', haciendo que el color del borde del elemento hijo sea azul.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor también puede ser usado por otras reglas que normalmente no heredarían de la propiedad de color, como el color de fondo. El siguiente ejemplo muestra a los hijos utilizando el conjunto de colores en el padre como fondo:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Resultado posible:

introduzca la descripción de la imagen aquí