Seleccionando etiquetas especificas con el uso de class e id

Ya anteriormente habíamos hablado de los selectores básicos, y habíamos tratado el uso de class e id, sin embargo este tipo de selectores es de tanta utilidad que merece un articulo aparte.

Una de las formas de seleccionar una etiqueta especifica es mediante el uso del atributo class y la asignación de un nombre dentro de una etiqueta, y utilizar este nombre como selector.

una clase (class) es un nombre que se selecciona para identificar a uno o varios elementos. Por ejemplo: Parrafo_inicial, ejemplo, resaltar, etc.

Si quisiéramos en el primer párrafo de un capitulo dar un estilo diferente al utilizado en otros párrafos, podríamos definir un selector con atributo class aplicado a las etiquetas <p>.

estiloclass-2

Esto define un selector de estilo que seleccionara a las etiquetas de párrafo <p> que tengan atributo class con el nombre de primer.

Se puede utilizar este estilo en un documento, simplemente mediante la asignación del nombre primer a un párrafo, tal y como se muestra en la siguiente figura.

<p class=”primer”>Este es el primer párrafo del capitulo, </p>

estiloclass-3

Esto produce la siguiente salida:

estiloclass-4

Como se observa solo el primer párrafo, al cual se le ha asignado el nombre primer al atributo class, tiene el estilo creado con el selector p.primer. El otro párrafo tiene el estilo generado por defecto por el navegador, ya que no tiene reglas de estilo declaradas.

Lo mismo puede ser logrado utilizando selectores con id.

p#primer { color:blue; font-size:20px; font-family:georgia, arial;}

y en el documento tendríamos que identificar el elemento <p> al cual queremos aplicar el nombre de id primer.

<p id=”primer”>Este es el primer párrafo del capitulo, </p>

y el efecto sería el mismo. La diferencia es que cuando utilizamos un id, este debe ser único en el documento, no debe haber dos elementos con el mismo id. sin embargo cuando creamos un nombre class, este puede ser aplicado múltiples veces a lo largo del documento.

id se utiliza para referirse a un elemento único en el documento, mientras que class, se refiere a una clase y puede aplicarse a múltiples elementos, del mismo tipo o de diferente tipo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s