Ahora que ya dominas lo más básico de CSS estás listo para aprender a hacer cosas un poco más avanzadas. Pero solo un poco más.

1. Aplicar varias clases a un mismo objeto

Es posible aplicar más de un estilo a un mismo elemento. Esto se consigue poniendo los nombres de las clases separadas por un espacio.

<p class="marcado grande">Texto marcado y grande</p>

En el CSS no hay que hacer nada raro.

.grande{
font-size: x-large;
}
.marcado{
background: #ffff86;
}

2. Combinar clases de forma jerárquica

Se pueden combinar varias clases de forma jerárquica. Esto sirve para aplicar algunas clases solo a aquellos elementos que ya tienen otra clase. Fijaros en el ejemplo siguiente como la clase ‘verde’ no se aplica en el último caso.

<p class="resaltado azul">Caja resaltada en azul</p>
<p class="resaltado verde">Caja resaltada en verde</p>
<p class="verde">La clase 'verde' no se aplica aquí porque necesita estar combinada con la clase 'resaltado'</p>

La clave para que esto funcione está en el CSS:

.resaltado{
border: 1px solid;
padding: 1em;
margin: 1em 0px 1em 0px;
}
.resaltado.azul{
border-color: #1f5cff;
color: #002892;
background-color: #acc3ff;
}
.resaltado.verde{
border-color: #47bd00;
color: #379200;
background-color: #a5ff70;
}

3. Aplicar una clase en función del tipo de elemento

Es posible, también, restringir la aplicación de cierta clase al tipo de elemento al que se aplica. En el HTML no hay que hacer nada especial.

<p class="importante">Este párrafo es muy importante</p>
<a href="#" class="importante">Este enlace es muy importante</a>

La clave está, otra vez, en el CSS:

p.importante{
color: red;
font-weight: bold;
text-transform: uppercase;
}
a.importante{
color: red;
font-weight: bold;
}
a:hover.importante{
background-color: #ffa1a1;
}

4. Aplicar un estilo a un elemento según el elemento padre

Una misma clase puede aplicar un estilo diferente en función del elemento padre. Fijaros, en el ejemplo siguiente, en como cambia el estilo aplicado al enlace según esté en un párrafo o en una cabecera de nivel cuatro.

<h4>Este es un <a class="relevante" href="#">enlace externo</a> dentro de una cabecera.</h4>
<p>Este es un <a class="relevante" href="#">enlace externo</a> dentro de un párrafo.</p>

Y el CSS:

h4 a{
color: red;
}
p a{
color: blue;
}

5. Aplicar una clase en función de la clase del elemento padre

En este ejemplo creamos una clase que aplica un estilo u otro según la clase del elemento padre.

<div class="normal">
<p class="secreto">Texto secreto en un divisor normal. No se oculta</p>
</div>
<div class="escondrijo">
<p class="secreto">Texto secreto en un divisor con la clase 'escondrijo'. Se oculta.</p>
<small>(pasa el ratón por encima)</small>
</div>

Lo que tenemos que hacer en el CSS no es nada complicado:

.escondrijo{
padding: 10px;
background-color: #dadada;
}
div.escondrijo .secreto{
visibility: hidden;
}
div.escondrijo:hover .secreto{
visibility: visible;
}

Otras partes de esta serie:

Esta entrada es la última parte de la serie “Cinco cosas que debes sabre sobre CSS”:

1. Cinco cosas básicas que debes sabre sobre CSS (aprende CSS en 5 pasos)
2. Cinco cosas (menos básicas) que debes saber sobre CSS
3. Cinco cosas avanzadas que debes saber sobre CSS