CSS: los selectores

Para poder dar estilo a los elementos de nuestro documento HTML debemos utilizar lo que se conocen como "selectores". Un selector puede hacer referencia a uno, varios o incluso a todos los elementos HTML. El número de selectores ha ido creciendo ampliamente con el desarrollo de la especificación CSS, facilitando enormente el trabajo de los diseñadores web. Aunque debemos tener en cuenta que gran parte de ellos aún no son soportados por muchos navegadores web.

Entre los selectores más utilizados encontramos:

  • Selectores tipo

    Representan los tipos de elementos del código HTML al que se hace referencia. Para su definición se utiliza la misma palabra que la de la etiqueta (sin los signos < >). Por ejemplo, el selector p selecciona todos los elementos <p> de la manera: p { ... }

  • Selectores id

    Representan el elemento HTML que contiene el ID al que se hace referencia. Para su definición se utiliza el caracter "#" seguido del nombre de dicho ID. Por ejemplo, el selector #mi_id selecciona el elemento HTML que contenga el atributo id="mi_id" de la manera: #mi_id { ... }

  • Selectores clase

    Representan los elementos HTML que contienen la clase a la que se hace referencia. Para su definición se utiliza el caracter "." seguido del nombre de dicha clase. Por ejemplo, el selector .mi_clase selecciona todos los elementos HTML que contengan el atributo class="mi_clase" de la manera: .mi_clase { ... }

    Debemos tener en cuenta que mientras los IDs han de ser únicos en el documento HTML, con las clases no sucede lo mismo.

  • Selector universal

    Representa todos los elementos HTML. Para su definición se utiliza el caracter "*".

  • Selectores de atributo

    Representan los elementos HTML que contienen el atributo al que se hace referencia. Para su definición se utiliza el nombre de un elemento seguido del nombre de dicha propiedad entre corchetes ([ ]). Por ejemplo, el selector img[alt] selecciona todas los elementos <img> que contengan el atributo alt.

    También podemos ir más allá y colocar un valor al atributo de dicho selector. Por ejemplo, el selector img[alt="foto"] selecciona todas los elementos <img> que contengan el atributo alt="foto".

Combinación de selectores

También podemos servimos de varios selectores para dar estilo a nuestros elementos HTML. Cuando van separados por un espacio representan a los elementos anidados. Por ejemplo, la expresión div p representa todos los elementos p contenidos dentro de un div. No hay límite de selectores por ejemplo, div p a img representaría todas las imágenes contenidas dentro de un enlace->párrafo->bloque.

Agrupación de selectores

En ocasiones tendremos que dar las mismas propiedades de estilo a distintos elementos. Para evitar reescribirlas, podemos agrupar sus respectivos selectores seprandolos por comas. Por ejemplo: p, #mi_id, img[alt] { ... }

Por supuesto, hay muchos más tipos de selectores y sin embargo no todos los desarrolladores web los explotan al máximo. En parte debido a que, al igual que ocurre con las propiedades de estilo, no todos los selectores son soportados por la totalidad de los navegadores (especialmente los incorporadas en CSS3).

Aqui podéis ver la lista de selectores completa:
http://www.w3schools.com/cssref/css_selectors.asp

Si nos fijamos en la ultima columna de la tabla de w3schools, la llegada de CSS3 ha multiplicado los tipos de selectores que podemos utilizar, facilitando enormente el diseño de nuestros sitios.

En fin, aunque CSS no es para nada complicado tampoco se aprende en dos días. Me dejo multitud de cosas, pero es que si me pongo no acabaría nunca. :P En este enlace podéis encontrar un explicación mucho más detallada:
http://www.librosweb.es/css/capitulo2.html

De momento lo dejo aquí, a la espera de vuestras dudas. La próxima semana entraré más en detalle sobre las buenas prácticas y como optimizar nuestro código CSS.

Comments

You must sing in to post a comment.

There are no comments for this article.