Selectores CSS básicos

Selectores CSS básicos

Selectores CSS básicos

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración”. La declaración se utiliza para decir “qué hay que hacer” y el selector es lo que dice “a quién hay que hacérselo”. La declaración de una regla sencilla puede indicar por ejemplo que el color de la letra debe ser rojo, y el selector de esa regla sencilla puede indicar por ejemplo que los elementos a los que se aplica ese estilo son todos los párrafos de la página. A un mismo elemento HTML se le pueden definir infinitas reglas CSS y cada regla puede tener un número infinito de selectores sobre los que se aplica. Aunque CSS 2.1 define una docena de tipos de selectores, la mayoría de las páginas web se pueden definir utilizando solamente los cinco selectores básicos. Además, Internet Explorer 6, uno de los navegadores que más utilizan los usuarios, no soporta los selectores avanzados, por lo que es casi obligatorio utilizar solamente los selectores básicos.

Selectores básicos

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Para utilizar este selector, solamente es necesario indicar el nombre de la etiqueta HTML correspondiente a los elementos que se quieren seleccionar. Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes.

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos.

Selector descendente

Permite seleccionar los elementos que se encuentran dentro de otros elementos. Los selectores descendentes permiten aplicar de forma sencilla diferentes estilos a los elementos del mismo tipo.

Selector de clase

Los selectores de clase son los selectores más utilizados junto con los selectores de ID. Utilizando este selector, se pueden seleccionar todos los elementos de la página cuyo atributo class coincida con el selector.

Este tipo de selector es imprescindible para poder seleccionar elementos específicos de la página. ¿Cómo se pueden seleccionar tres párrafos concretos de una página HTML en la que cada párrafo se encuentra en una zona diferente? ▪ Con el selector universal se seleccionarían todos los elementos de la página, por lo que no se puede utilizar. ▪ El selector de tipo seleccionaría todos los párrafos de la página, por lo que tampoco es útil. ▪ El selector descendente tampoco es apropiado ya que cada párrafo puede encontrarse dentro de diferentes elementos. En este tipo de situaciones, se asigna un atributo class específico a los elementos que se quieren seleccionar y en la hoja de estilos CSS se utiliza el selector de clase. Para seleccionar solamente los elementos de un tipo y un atributo class determinado, se indica la etiqueta del elemento y sin dejar ningún espacio, se indica el selector de clase.

Selectores de ID

CSS también permite seleccionar elementos HTML en función del valor de su atributo id. La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. Por tanto, cuando se quiere aplicar un estilo a un solo elemento específico, se utiliza el selector de id. Si se quiere aplicar un estilo a varios elementos diferentes, se utiliza el selector de clase. Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores.

Fuente

Libro "Introducción a CSS" del autor Javier Eguíluz Pérez, 20 de febrero de 2008. Los contenidos de este libro están bajo una licencia Creative Commons.