3

Tengo el siguiente código:

.llamativo{
	border-left: 1px double darkgray;
	border-bottom: 1px double darkgray;
	box-shadow: 0 0 5px inset;
	border-radius: 4px;
	font-weight: bold;
	font-size: 22px;
	padding: 10px;
	margin: 5px 0;
}
.llamativo .pred{
	background-color: #eee!important;
}
.llamativo .rojo{
	background-color: #ce0005!important;
}
.llamativo .azul{
	background-color: #0082bf!important;
}
.llamativo .piel{
	background-color: #eecc86!important;
}
<h1 class="llamativo azul">Título</h1>

Las clases .rojo .azul .pred .piel no se aplican, no entiendo porqué. Las estoy llamando, como es el ejemplo del Snippet, pero no funciona.

3 respuestas 3

3

No se llaman porque la segunda clase no se encuentra en un elemento posterior deberías quitar el espacio después de .llamativo dejándolo de esta manera .llamativo.color

.llamativo{
	border-left: 1px double darkgray;
	border-bottom: 1px double darkgray;
	box-shadow: 0 0 5px inset;
	border-radius: 4px;
	font-weight: bold;
	font-size: 22px;
	padding: 10px;
	margin: 5px 0;
}
.llamativo.pred{
	background-color: #eee!important;
}
.llamativo.rojo{
	background-color: #ce0005!important;
}
.llamativo.azul{
	background-color: #0082bf!important;
}
.llamativo.piel{
	background-color: #eecc86!important;
}
<h1 class="llamativo azul">Título</h1>

1
  • Rayos... :( Se me pasó ... Las prisas. Gracias el 10 ene. 2017 a las 18:36
1

Eso es por que por ejemplo la clase .pred dentro del CSS debe encontrarse dentro de otra llamada .llamativo para que te funcione deberias eliminar los espacios que tienes entre los selectores por ejemplo .llamativo.pred

1

Lo unico que tienes que hacer es a .llamativo .pred quitarle .llamativo y dejarle solo la clase. o pegar las clases en caso de querer el estilo solo cuando las 2 estén en el elemento

En css para hacer referencia a un hijo de un elemento hacemos esto:

.llamativo .pred {...} 

y para agregar un estilo solo si el elemento tiene dos clases hay que quitar el espacio entre ellas algo así

.llamativo{
	border-left: 1px double darkgray;
	border-bottom: 1px double darkgray;
	box-shadow: 0 0 5px inset;
	border-radius: 4px;
	font-weight: bold;
	font-size: 22px;
	padding: 10px;
	margin: 5px 0;
}
.llamativo.pred{
	background-color: #eee!important;
}
.llamativo.rojo{
	background-color: #ce0005!important;
}
.llamativo.azul{
	background-color: #0082bf!important;
}
.llamativo.piel{
	background-color: #eecc86!important;
}
<h1 class="llamativo azul">Título</h1><!--tiene que tener las 2 clases para agregar los estilos-->
<h1 class="azul">Título</h1><!--No tiene las 2 clases y por eso no agrega los estilos-->

y si simplemente es una clase independiente es así:

.llamativo{
	border-left: 1px double darkgray;
	border-bottom: 1px double darkgray;
	box-shadow: 0 0 5px inset;
	border-radius: 4px;
	font-weight: bold;
	font-size: 22px;
	padding: 10px;
	margin: 5px 0;
}
.pred{
	background-color: #eee!important;
}
.rojo{
	background-color: #ce0005!important;
}
.azul{
	background-color: #0082bf!important;
}
.piel{
	background-color: #eecc86!important;
}
<h1 class="llamativo azul">Título</h1>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.