Selectores CSS y jQuery (I). Introducción y selectores simples.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Iniciamos esta serie dedicada a los selectores que se emplean en CSS 3 y en jQuery para referenciar los elementos de un documento web. Todos sabemos, con caracter general, lo que son los selectores. Son identificadores que permiten determinar a que elemento o elementos de una página se va a aplicar un estilo, o se van a ver afectados por una operación. Sin embargo, la mayoría de nosotros estamos muy familiarizados con los selectores que usamos en el día a día, pero no con otros que no usamos a menudo (o que quizá no usamos nunca) y que podrían facilitarnos la vida.

En estos artículos pretendemos recopilar todos los selectores que se emplean actualmente, para CSS y para jQuery, a modo de referencia o consulta. No vamos a enseñarte CSS ni jQuery aquí. Damos por sentado que ya te son familiares, en mayor o menor grado. Estos artículos son solo una guía de referencia de los distintos selectores para tenerla a mano.Vamos a dividir los selectores en las siguientes cinco categorías:

  • Selectores simples
  • Selectores compuestos
  • Pseudo elementos
  • Pseudo clases
  • Pseudo clases complejas

A lo largo de este artículo y los siguientes procuraremos recopilarlos todos.

SELECTORES SIMPLES

Empecemos considerando los selectores que se refieren, únicamente, a un elemento o grupo de elementos HTML, como los que usamos veinte veces todos los días en nuestros desarrollos. Los selectores recopilados aquí son los más simples que podemos usar, tanto en hojas de estilos como en código jQuery.

SELECTOR UNIVERSAL

El selector * hace referencia a todos los elementos de un documentos web. Supongamos la siguiente definición css

Con esto haremos que cada uno de los elementos del documento que contenga texto (párrafos, divs, etc) lo muestre en color azul. Este selector hace que las reglas que defina se apliquen a todos y cada uno de los elementos de la página. Evidentemente, sólo se aplicarán a aquellos elementos sobre los que la regla tenga sentido: en el ejemplo mostrado, no se aplicará el color azul, por ejemplo, sobre imágenes o vídeos.

SELECTORES DE ETIQUETA

Se refieren a una etiqueta HTML, y afectan a todos los elementos que llevan esa etiqueta en la página a la que se enlaza la hoja de estilos o el jQuery. Para construir este selector, simplemente se usa el nombre de la etiqueta sobre la que nos interesa trabajar. Por ejemplo:

Este ejemplo afecta a todas las etiquetas body que se encuentren en el documento (evidentemente, no es el mejor ejemplo, ya que, en un documento web sólo hay una etiqueta body).

Este ejemplo afecta a todos los contenidos que se encuentren formando un elemento article, es decir, entre las etiquetas <article> y </article>. En general, esto significa que si hay contenidos distribuidos bajo otros elementos dentro de un article, también se verán afectados. Imagina el siguiente elemento article:

<article><p>Contenido<p></article>

El contenido que hay dentro del párrafo (elemento p) se verá afectado por los estilos aplicados a la etiqueta article, por estar formado parte del elemento article. Sabemos que esto no siempre es así. Hay algunos elementos, como los enlaces, en los que hay que ser más específico para establecerles un estilo cuando no están, directamente, en la ráiz del documento, como veremos en el próximo artículo.

Por supuesto, como ya sabes, se puede referenciar mediante este selector cualquier etiqueta que esté dentro de nuestra página HTML.

SELECTORES DE ID

Afectan al elemento de la página cuyo atributo coincide con el id especificado. Como todos sabemos, un id no puede aplicarse a más de un elemento en una misma página, por lo que estos selectores sólo afectarán a un elemento concreto. Suponte el siguiente fragmento HTML:

En la hoja de estilos referenciamos el id que nos interesa precediéndolo con el guarismo #, al contrario que los selectores de etiqueta, en los que el nombre de la etiqueta no se precede con ningún carácter. Lo hacemos así:

Esto pondrá el texto en rojo, sólo para el article cuyo id coincide con elemento_afectado. El resto de los contenidos de la página no se verán afectados por esta regla CSS, y lo mismo puede decirse de referencias en jQuery.

SELECTORES DE CLASE

Son aquellos que afectan a los elementos de una página HTML que tienen aplicada una clase específica. Supongamos el siguiente fragmento HTML:

<div>Zona de contenidos 1</div>
<div class="zona_azul">Zona de contenidos 2</div>
<div class="zona_azul">Zona de contenidos 3</div>
<div>Zona de contenidos 4</div>
<div>Zona de contenidos 5</div>

La regla CSS se constuye precediendo el nombre de la clase afectada con un punto (.), lo que indica que es un selector de clase, así:

.zona_azul{
    background-color: blue;
}

En este ejemplo, se verían afectados los elementos div segundo y tercero, que son los que tienen apilcado el atributo class con el nombre de la clase a la que se refiere la regla CSS.

RESUMEN

En este artículo hemos conocido los selectores simples, que son los más básicos que podemos emplear en una hoja de estilos, o en una referencia en jQuery. A modo de resumen, incluimos la siguiente tabla:

SELECTORES SIMPLES
TIPO DE SELECTOR EJEMPLO COMENTARIOS
Universal * Afecta a todos los elementos de un documento web.
De etiqueta span Se indica mediante el nombre de la etiqueta a la que queremos afectar con la regla CSS o la instrucción jQuery. El nombre de la etiqueta no se precede con ningún guarismo especial. Afecta a todos los elementos que estén dentro de una etiqueta como la empleada para definir la regla CSS (excepto en casos concretos, que mencionaremos en artículos posteriores).
De identificador #mi_elemento Afecta al elemento HTML que tenga aplicado el atributo id con el valor que hemos referenciado en la regla CSS. El valor de un id sólo puede aplicarse a un elemento en la página, por lo que este es un selector extremadamente restrictivo. Tanto en CSS cómo en jQuery, se precede el nombre del identificador con el guarismo #.
De clase .mi_clase Afecta a todos los elementos que tienen el atributo class con el valor que coincide con el nombre de la clase referenciada en la regla CSS. Se precede el nombre de la clase con un punto (.).

Cómo sabes, los selectores en jQuery se encierran entre comillas, ya sean simples o dobles. Cuidado con esto, que da lugar a errores.

En el próximo artículo hablaremos de selectores compuestos.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *