Home / Questions / 43319
Accepted
Máxima Alekz
Asked: 2020-01-11 10:32:01 +0800 CST 2020-01-11 10:32:01 +0800 CST

Problem with CSS - Background Color

  • 772

I have the following code:

.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>

The .red .blue .pred .skin classes are not applied, I don't understand why. I'm calling them, like the Snippet example , but it doesn't work.

html

3 Answers

  1. Best Answer

    They are not called because the second class is not found in a later element you should remove the space after .llamativoleaving it this way.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>

    • 3

  2. That is because, for example, the class .predwithin the CSS must be within another call .llamativofor it to work, you should eliminate the spaces that you have between the selectors, for example.llamativo.pred

    • 1

  3. The only thing you have to do is .llamativo .predremove .llamativohim and leave him alone with the class. or paste the classes in case you want the style only when the 2 are in the element

    In css to refer to a child of an element we do this:

    .llamativo .pred {...}

    and to add a style only if the element has two classes you have to remove the space between them something like this

    .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-->

    and if it is simply an independent class it is like this:

    .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>

    • 1