Problem with CSS - Background Color

Question

Problem with CSS - Background Color

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

3

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 classes .red.blue .pred .piel do not apply, I do not understand why. I'm calling you, as is the example of the Snippet , but it does not work.

html css

asked by Máxima Alekz 10.01.2017 в 19:32

source

3 answers

1

That's because for example the class .pred within the CSS must be inside another call .llamativo to work for you should eliminate the spaces you have between the selectors for example .llamativo.pred

answered by 10.01.2017 в 19:37

1

The only thing you have to do is to .llamativo .pred remove .llamativo and leave the class alone. or paste the classes if 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's just an independent class, it's 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>

answered by 21.12.2017 в 02:22

Metatags with or without an accent Autocomplete text of an input based on data stored in Local Storage

score 3 · Accepted Answer

They are not called because the second class is not in a later element you should remove the space after .llamativo leaving 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>