Lección 7: Identificación y agrupación de elementos (class e id)

A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar propiedades para los elementos seleccionados.

¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.

Agrupación de elementos con el atributo class

Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>
 
 

• Ver ejemplo

Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.

Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class.

Intentemos especificar algunas clases en el ejemplo anterior:

 
 <p>Uvas para el vino blanco:</p>
 <ul>
 <li><a href="ri.htm" class="whitewine">Riesling</a></li>
 <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
 <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
 </ul>

 <p>Uvas para el vino tinto:</p>
 <ul>
 <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
 <li><a href="me.htm" class="redwine">Merlot</a></li>
 <li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
 </ul>
 
 

A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.

 
 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }
 
 

• Ver ejemplo

Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.

Identificación de un elemento usando el atributo id

Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id.

Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:

 
 <h1>Capítulo 1</h1>
 ...
 <h2>Capítulo 1.1</h2>
 ...
 <h2>Capítulo 1.2</h2>
 ...
 <h1>Capítulo 2</h1>
 ...
 <h2>Capítulo 2.1</h2>
 ...
 <h3>Capítulo 2.1.2</h3>
 ...
 
 

El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:

 
 <h1 id="c1">Capítulo 1</h1>
 ...
 <h2 id="c1-1">Capítulo 1.1</h2>
 ...
 <h2 id="c1-2">Capítulo 1.2</h2>
 ...
 <h1 id="c2">Capítulo 2</h1>
 ...
 <h2 id="c2-1">Capítulo 2.1</h2>
 ...
 <h3 id="c2-1-2">Capítulo 2.1.2</h3>
 ...
 
 

Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:

 
 #c1-2 {
  color: red;
 }
 
 

• Ver ejemplo

Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando #nombredelidentificador en la hoja de estilo del documento.

Resumen

En esta lección hemos aprendido que usando los atributos class e id podrás especificar propiedades para elementos específicos.

fuente:http://es.html.net/tutorials/css/