The Class selector

Anteriormente vimos que los selectores de elementos apuntan a todos los elementos de una página (que normalmente se traducen a etiquetas HTML). Si queremos ser más específicos, el siguiente paso son los selectores de clases. En vez de apuntar a todos los elementos con un nombre específico, apuntan a todos los elementos que tienen un cierto nombre de clase especificado.

Aunque normalmente esto hace que la lista de elementos apuntados sea más estrecha, te da la oportunidad de apuntar al mismo tiempo a elementos de varios tipos (por ejemplo, etiquetas para texto en negrita e itálicas). Con un selector de clase, el nombre o tipo de elemento ya no es la parte importante.

Un selector de clases se ve como un selector de elementos, pero en vez de usar nombres que están reservados a elementos HTML, creas el nombre y luego agregas como prefijo un punto (.). Por ejemplo:

• .red{}
• .myElements { }
• .navigation { }

Solo se apuntan elementos que usan una o varias de estos nombres de clases. Déjame ilustrar con un ejemplo cómo funciona esto:

<style type="text/css">  
.red {  
    color: Red;  
}  

.beautiful {  
    font-weight: bold;  
    color: Blue;  
    font-style: italic;  
}  
</style>  

<p class="red">  
    Here's some text - <span class="beautiful">this part is especially pretty!</span>  
</p>

This text is very normal!

Prueba este ejemplo y observa tú mismo el resultado. Ten en cuenta que ahora dos elementos similares de tipo párrafo se ven completamente diferentes porque hemos asignado una clase al primero.

También observa cómo puedo nombrar los selectores como quiera. Los dos nombres son ahora un gran ejemplo de un mala y una buena (o al menos mejor) convención en el uso de nombres. El nombre "red" no es un buen nombre, porque la regla podría fácilmente contener más que la del color cuestión, o el color podría ser modificado en un re-diseño de rojo a azul. El último nombre es mejor porque es más general y no designa un color específico aspecto.

Clases de elementos específicos

En nuestro primer ejemplo, todos los tipos de elementos podían usar nuestras clases. Pero en algunas situaciones, quizás quieras limitar el uso a un tipo de elemento específico. Usualmente esto se hace para indicar cómo debe ser usada la clase, para permitir más de una clase con el mismo nombre y evitar conflictos. Las clases específicas de cada elemento se usan simplemente añadiendo el nombre de la clase al nombre del elemento en tu selector, como esto:

<style type="text/css">
span.beautiful {
    font-weight: bold;
    color: Blue;
    font-style: italic;
}
</style>

<p>
    Here's some <b class="beautiful">text</b> - <span class="beautiful">this part is especially pretty!</span>
</p>

Prueba este ejemplo y observa cómo a pesar de que tratamos de usar la clase beautiful en dos lugares, solo funciona para el elemento span, porque ahora requerimos eso.

Clases múltiples

Las clases no son únicas. La propiedad class de una etiqueta HTML te permite especificar más de una. Lo fascinante de esto es que podés combinar las reglas de varios selectores y usarlas para la misma etiqueta como quieras.

Esto significa también que en vez de escribir selectores con tantas reglas y luego solo apuntar unos pocos elementos, puedes escribir menos selectores específicos y simplemente combinarlos cuando es apropiado. Esto permite una mayor re-utilización, que es realmente de todo lo que trata CSS:

Observa este ejemplo:

<style type="text/css">
.status {
    padding: 5px;
    margin: 5px;
    border-width: 1px;
    border-style: solid;
}

.error {
    color: Red;
    border-color: Maroon;
}

.information {
    color: Blue;
    border-color: Navy;
}
</style>

<div class="status error">
    This is an error!
</div>

<div class="status information">
    This is information!
</div>

Aquí usamos CSS para mostrar información de cierto estado. Tenemos un selector común .status y luego tenemos un selector para mensajes de error y otro para mensaje de información. Claramente, mensajes de error y de información comparten cosas, ya que ambos son un tipo de mensaje, pero también tienen un aspecto distinto. Entonces, ponemos la parte común en una clase llamada .status, y luego el resto en dos clases diferentes llamadas .error y .information. Luego las usamos en las etiquetas div, simplemente separando sus nombres con un espacio.

Sin la clase común .status, tendríamos que repetir todos las propiedades para cada clase, lo que sería una pérdida de tiempo (y espacio en el servidor), y nos obliga a modificar en múltiples lugares cada vez que queramos bordes más gruesos o algo como eso.

En resumen

Como quedó demostrado, las clases CSS son muy versátiles. Es decir, pueden ser tan específicas o no específicas como quieras y puedes usarlas o no para todo tipo de elementos, (dependiendo de si el elemento hace o no referencia a la clase). Esto hace que las clases sean el tipo de selectores más flexible que puedas usar en CSS. En el siguiente capítulo, daremos una mirada al selector ID, que es incluso más específico.