Revisando en el sitio, veo que esta pregunta se ha echo anteriormente con regularidad, la solución que proponen es revertir la propiedad con los selectores > *
Fuentes: 1 2 3
Quisiera que el filtro brightness
para oscurecer el color primario primary-color
, no afecte al texto en blanco text-white
en la sección footer
.
Tengo una plantilla web en la que existe únicamente un color primario (aplicado a navbars, botones, footers, etc) y un secundario que por defecto siempre será gris.
Este color primario lo debo cambiar a petición por el usuario, tengo muchos usuarios, y para dar un poco de variedad a ese primary-color
, aplico filtros CSS (como saturación para "avivar" un poco el tono, o brillo para aclarar u oscurecer el tono). Sé que no es la mejor forma y existen alternativas como LESS en CSS en la que puedo utilizar @variables
para definir valores; lamentablemente el sitio está muy avanzado ya para pasarme a esta opción (A lo mejor en un futuro con más tiempo y conocimiento lo haga).
Usando estos filtros solo debo cambiar el valor heaxadecimal en primary-color
y listo. (No estoy siendo perezoso, en serio me ahorra demasiado trabajo y tiempo).
Esto es lo que tengo actualmente.
.primary-color{
background-color: #4285F4;
}
.primary-color .footer-copyright{
filter: brightness(50%);
}
.text-white{
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Footer -->
<footer class="page-footer font-small primary-color darken-3">
<div class="container">
<div class="row">
<div class="col-12">
<div class="mb-5 flex-center">
<p class="text-center">Redes Sociales</p>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div class="footer-copyright text-center text-white py-3 primary-color">© Copyright</div>
</footer>
Y así es como quisiera que se vea:
.primary-color > * .footer-copyright
es un poco raro y no seleccionará nada porque.footer-copyright
es un hijo directo de.primary-color
y al hacer.primary-color > * .footer-copyright
entonces estás indicando que.footer-copyright
debe ser al menos un nieto. Deberías indicar qué preguntas has utilizado como referencia en el sitio y explicar qué es lo que intentas hacer con el filtro y el código. Lee Cómo preguntar para más información.