Trucos CSS (Tutorial parte 5) - Usar clases aninadas

¿Cómo usar clases anidadas en CSS?
Para que nos entendamos, usar clases anidadas o identificadores anidados quiere decir poner varias propiedades dentro de los id ó class de css. Para ver cómo usar las clases anidadas, haremos un ejemplo y quedará explicado.
Primero debemos preparar las clases a anidar en css.

.blanco{color:#ffffff;}
.azul{color:#5c7999;}
.naranja{color:#eabd82;}

.tal{text-align:left;}
.tac{text-align:center;}
.tar{text-align:right;}

.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs14{font-size:14px}
.fs15{font-size:15px}

.mt5{margin-top:5px}
.mr5{margin-right:5px}
.ml5{margin-left:5px}
.mb5{margin-bottom:5px}
.m5{margin:5px}

.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pl5{padding-left:5px}
.pb5{padding-bottom:5px}
.p5{padding:5px}

Una vez definidos nuestros estilos en el archivo CSS, vamos al archivo html y lo editamos. Si tenemos un texto que queremos que se alinee a la derecha, que tenga un margen derecho de 5 px, un padding derecho de 5 px, fuente 10 px y color naraja, lo podemos definir en el CSS de la siguiente forma:


.estilo_parrafo{text-align:right;padding-right:5px;margin-right:5px;color:#eabd82;font-size:10px}

<p class="estilo_parrafo">Este es el párrafo</p>

Con clases anidadas haríamos:

<p class="mr5 pb5 fs_10 naranja tar">Este es el párrafo</p>


«Anterior

Trucos CSS (Tutorial parte 5) - Usar clases anidadas

Siguiente»