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 siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS): /*

• {

margin: 0; padding: 0; } 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. El siguiente ejemplo selecciona todos los párrafos de la página: /*p { ... } Para utilizar este selector, solamente es necesario indicar el nombre de la etiqueta HTML correspondiente a los elementos que se quieren seleccionar. El siguiente ejemplo aplica diferentes estilos a los titulares y a las listas de una página HTML: h1 { margin: 0 0 0.5em; font-size: 1.8em; line-height: 1.2; } ul { padding: 0 0 0 2em; list-style: square; } ol { padding: 0 0 0 2.5em } li { margin: 0 0 0.5em } Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes. Si se considera el siguiente ejemplo, en el que los títulos de sección h1, h2 y h3 comparten los mismos estilos: h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h2 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } CSS permite aplicar directamente los mismos estilos a varios selectores de forma simultánea. Para ello, se indican todos los selectores diferentes separados por una coma (,). La siguiente regla CSS es equivalente al ejemplo anterior: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } 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. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección y a continuación, establece el tamaño de cada uno de ellos: h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; }

Selector descendente

Permite seleccionar los elementos que se encuentran dentro de otros elementos. El siguiente ejemplo se emplea para visualizar en negrita el texto de cualquier elemento contenido dentro de un elemento

: p span { font-weight: bold; } Si el código HTML es el siguiente:

... texto1 ... <a href="">...texto2</a> ...

Aplicando la regla CSS anterior, tanto texto1 como texto2 se verán en negrita. La razón es que con el selector descendente, un elemento no tiene que ser “hijo directo” de otro, sino que la única condición es que esté dentro de ese elemento, sin importar lo profundo que se encuentre.

Al resto de elementos de la página que no están dentro de un elemento

, no se les aplica la regla CSS anterior. Los selectores descendentes permiten aplicar de forma sencilla diferentes estilos a los elementos del mismo tipo. /*El siguiente ejemplo amplía el anterior y muestra de color rojo todo el texto de los contenidos dentro de un

:

1. p span { font-weight: bold; }
2. h1 span { color: red; }

Con las reglas CSS anteriores, los elementos que se encuentran dentro de un elemento

se muestran en negrita. Los elementos dentro de un elemento

se muestran de color rojo y el resto de elementos de la página, se muestran con el aspecto por defecto aplicado por el navegador. Se pueden utilizar varios selectores descendentes seguidos: p a span em { text-decoration: underline; } La anterior regla CSS solamente se aplica al texto contenido en los elementos que formen parte de un contenido en cualquier enlace de un párrafo. Aunque puede parecer difícil de entender, el razonamiento siempre es el mismo: el elemento al que se aplica el estilo siempre es el último selector indicado (em en el ejemplo anterior) y todos los selectores anteriores indican dónde debe encontrarse ese elemento para que se le apliquen los estilos (p a span en el ejemplo anterior). No debe confundirse el selector descendente con la combinación de selectores: /* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */ p, a, span, em { text-decoration: underline; } /* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */ p a span em { text-decoration: underline; } Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente. El siguiente ejemplo, muestra los dos enlaces de color rojo: p a { color: red; }

<a href="#">Enlace</a>

<a href="#">Enlace</a>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo: p * a { color: red; }

<a href="#">Enlace</a>

<a href="#">Enlace</a>

La razón es que el selector p * a se puede traducir como todos los elementos de tipo “a” que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento “p”. Como el primer elemento <a> se encuentra directamente bajo un elemento

, no se cumple la condición del selector.

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. Este selector está formado por un signo de punto (.) y el nombre del atributo class que se quiere seleccionar. Por tanto, en el siguiente ejemplo, solamente el segundo párrafo se mostrará de color rojo: .especial { color: red; }

Primer párrafo

Segundo párrafo

Tercer párrafo

El selector .especial se traduce como “cualquier elemento cuyo atributo class sea igual a especial“, por lo que solamente el segundo párrafo cumple la condición. A continuación se muestra otro ejemplo de selectores de clase: .aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } .error { color: #930; font-weight: bold; }

...

El elemento tiene un atributo class=”error”, por lo que se le aplicarán las reglas CSS indicadas por el selector .error. Por su parte, el elemento

tiene un atributo class=”aviso”, por lo que su estilo será el que definan las reglas CSS del selector .aviso.

Combinando este selector con los anteriores, se puede restringir el alcance de los selectores.

El siguiente ejemplo aplica la regla CSS solamente a los elementos de tipo

que tengan un atributo class igual al indicado: p.aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } 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. De esta forma, la regla anterior ya no se aplicaría al elemento .... No debe confundirse este selector con los anteriores: /* Todos los elementos de tipo "p" con atributo class="aviso" */ p.aviso { ... } /* Todos los elementos con atributo class="aviso" que estén dentro de cualquier elemento de tipo "p" */ p .aviso { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página */ p, .aviso { ... }

Selectores de ID

CSS también permite seleccionar elementos HTML en función del valor de su atributo id. La explicación es la misma que para el selector de clase. La sintaxis utilizada también es la misma, salvo que en este caso se utiliza el símbolo de la almohadilla (#) en vez del símbolo del punto (.).

1. especial { color: red; }

Primer párrafo

Segundo párrafo

Tercer párrafo

En el ejemplo anterior, solamente el segundo párrafo (cuyo atributo id es igual a especial) será seleccionado por el selector #especial. 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.

El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo

que tenga un atributo id igual al indicado: p#aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } El ejemplo anterior puede parecer absurdo y redundante. Si el sitio web solamente contiene una página, el selector anterior es redundante, ya que #aviso sólo puede hacer referencia a un único elemento de la página (no sería necesario especificar que el elemento es de tipo

). Sin embargo, si la anterior regla forma parte de un archivo CSS utilizado en multitud de páginas diferentes, puede ser necesario restringir el alcance del selector #aviso sólo para los elementos de tipo

. Tampoco debe confundirse este selector con los anteriores: /* Todos los elementos de tipo "p" con atributo id="aviso" */ p#aviso { ... } /* Todos los elementos con atributo id="aviso" que estén dentro de cualquier elemento de tipo "p" */ p #aviso { ... } /* Todos los elementos "p" de la página y todos los elementos con atributo id="aviso" de la página */ p, #aviso { ... }

Combinación de selectores básicos

CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales de combinación de selectores. .aviso .especial { ... } El anterior selector solamente selecciona aquellos elementos con un class=”especial” que se encuentren dentro de cualquier elemento con un class=”aviso”. Si se modifica el anterior selector: div.aviso span.especial { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo con un atributo class=”especial” que estén dentro de cualquier elemento de tipo

que tenga un atributo class=”aviso”.

La combinación de selectores puede llegar a ser todo lo compleja que sea necesario: ul#menuPrincipal li.destacado a#inicio { ... }

El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo

con un atributo class igual a destacado, que forma parte de una lista

con un atributo id igual a menuPrincipal./*

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.