CSS Herencia

[txarly]

Tengo un estilo para dar a un div un fondo de color rojo, además de otras propiedades

Código:

.pubListItem_Ranking
{
    float:          right;
    font-size:      1.2em;
    color:          White;
    padding:        5px;
    text-align:     center;
    display:        table-cell;
    vertical-align: middle;
    width:          30px;
    background:     red;
}

Si quiero tener una clase igual para fondo verde y naranja, ¿tengo que duplicar la clase y darle otro nombre o puedo reaprovechar estilos?

[pzin]

Puedes definir otra clase, por ejemplo:

Código CSS:

.rojo {
  background-color: red;
}
 

Y luego, en tu HTML, definir que se llamen a las dos clases:

Código HTML:

<div class="pubListItem_Ranking rojo">
 

Luego, también tienes otra opción. Que sería definir otra clase extra, como en el caso, pero también con las propiedades de la primera.

Código CSS:

.pubListItem_Ranking,.pubListItem_RankingRojo {
  /*resto de estilos*/  
  background-color: white;
}
.pubListItem_RankingRojo {
  background-color: red;
}
 

Así la clase pubListItem_RankingRojo tendría los mismos valores que la otra clase, lo que cambiaría serían las propiedades definidas en .pubListItem_RankingRojo.

[txarly]

Muchas gracias, utilizaré dos clases y así el CSS quedará más limpio:

Código HTML:

<div class="pubListItem_Ranking rojo"> 

Tengo otra duda, es que estoy empezando a practicar con los estilos:

En el CSS tengo el siguiente estilo para los h3 y h4

Código:

h3, h4 { 
	font-size:		1.1em;
	background:		#EEF;
	border:			1px solid #BBB;
	border-width:	0 0 1px;
	padding:		7px 10px;
	margin:			0;
}

Para los h3 de un formulario no quiero heredar estos estilos:

Código:

#mainForm h3
{
    font-size:		1.8em;
}

¿Se puede resetear de alguna forma el estilo para que no herede lo de h3?

[pzin]

No se puede evitar que se hereden los estilos. La C de CSS viene siendo justo eso.