Clases de elementos en CSS

En lecciones anteriores seleccionábamos elementos de la página por el nombre de la etiqueta, aplicando estilos, por ejemplo, simultáneamente a todos los párrafos. Sin embargo, en una página puede haber párrafos de diferentes tipos, a los que es necesario aplicar estilos diferentes. Para resolver este problema, podemos asignar diferentes párrafos a diferentes clases CSS.

Para asignar una etiqueta a una clase, es necesario escribir en esa etiqueta el atributo class, y en él - el nombre de la clase inventado por usted, compuesto por letras, números, guiones bajos y guiones.

Veamos un ejemplo. Creemos párrafos con dos tipos de clases - eee y zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Ahora accedamos en CSS a los párrafos con las diferentes clases y asignémosles algunos estilos. Por ejemplo, coloreemos los párrafos con la clase zzz en color rojo, y los párrafos con la clase eee - en verde.

Para ello, en el archivo CSS debemos acceder a nuestras clases. La selección tiene la siguiente sintaxis: primero va el símbolo punto, y luego el nombre de clase inventado por nosotros. Es decir, para acceder a la clase eee debemos escribir .eee, y para la clase zzz - escribir .zzz.

Entonces, hagamos lo descrito. Añadamos a nuestro HTML también los estilos CSS para las clases introducidas por nosotros:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Si ejecutamos nuestro código, el resultado será el siguiente:

Se da el siguiente código:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Coloree en rojo los elementos con la clase odd y en verde - los elementos con la clase eve.

Se da el siguiente código:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Coloree en rojo todos los elementos con la clase eee.

Explique por qué en la tarea anterior se colorean en rojo las etiquetas li, aunque la clase que define el color está asignada a la etiqueta ul.