Ir directamente al contenido de esta página
Como es obvio, para aplicar un estilo a una parte de un documento hay que hacer referencia a ésta. En las regras de una hoja de estilo, esta referencia se recoge en el selector, que son lo elementos, identificadores, clases, o grupos de los anteriores, que aparecen antes de la apertura de llave que engloba las declaraciones. Técnicamente, hay dos tipos de selectores:
destacado.Hay tres clases de selectores básicos:
Elementos: Cualquiera de los elementos que hemos visto en la sección anterior del curso es susceptible de ser seleccionado y recibir un estilo, siempre y cuando aparezca en el body del documento, sea el propio body, o bien html. Su sintaxis es elemento{…}:
Ejemplos:
html{
color:#C00;
background-color:inherit;
font-family:Georgia,"Times New Roman",Times,serif;
}
h1{
font-weight:normal;
font-size:140%;
padding:0.4em;
}
p{
margin:1em 50px;
}
Identificadores: Corresponden a los id asignados a los elementos de la página. Su sintaxis es #identificador{…}.
Ejemplos:
#contenido-principal{
color:#333;
background-color:transparent;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
margin:1em;
}
#navegacion{
display:inline;
padding:5px;
}
#pie{
font-size:90%;
text-align:center;
}
Clases: Corresponden a los atributos class incluidos en el código del documento. Su sintaxis es .clase{…}.
Ejemplos:
.intro{
color:#FFF;
background-color:#333;
font-family:"Trebuchet MS",Verdana,Helvetica,sans-serif;
font-style:italic;
padding:0.75em;
border:1px dotted #000;
}
.error{
color:red;
}
Se pueden combinar los selectores básicos para hacerlos un poco más específicos. Por ejemplo, p.intro seleccionaría sólo los párrafos que además tuviesen un atributo class con el valor intro; div#pie sólo seleccionaría aquel elemento cuyo id fuese pie y que fuese un div.
Los selectores avanzados permiten acotar las partes del documento a las que se va a aplicar un estilo. Por ejemplo, hemos visto que aplicando un estilo a p modificaríamos el aspecto de todos los párrafos de una página. ¿Pero que ocurre si queremos modificar exclusivamente el aspecto de los párrafos de la columna derecha de información adicional? Un principiante añade clases y las emplea como selector básico, pero nosotros que queremos llegar a ser «altos programadores» —de nivel 12 o más—, aplicamos los selectores avanzados.
Hay dos tipos de selectores avanzados, los que se basan en relaciones de parentesco entre los nodos del documento, y los que se basan en la selección por medio de atributos.
Antes de pasar al primer tipo, unas notas sobre el árbol del documento.
Aunque se tratará el tema más específicamente en la sección dedicada al modelo de documento de la capa de comportamiento, es necesario aclarar algunos conceptos. Si miramos un código XHTML o HTML, vemos elementos anidados dentro de otros. Todos los elementos que están anidados en el nivel inmediatamente inferior de un elemento son los hijos hijos de tal elemento, el cual a su vez recibe el nombre de padre. Dos elementos que comparten el mismo padre son hermanos. Todos los elementos anidados en un elemento anidado dentro de un primer elemento se consideran descendientes de ese primero. Y, por último, partiendo de un elemento, cada uno de los que lo contiene en algún grado son sus ascendienteso ancestros.
En un ejemplo:
<?xml version="1.0"?>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Título</title>
</head>
<body>
<div id="contenido">
<h1>Un encabezado</h1>
<p>Un párrafo.</p>
<p>Otro párrafo.</p>
<p><i>Otro párrafo más, en cursiva.</i></p>
<p>El párrafo final, <a href="otra_pagina.htm">con un vínculo</a>.</p>
</div>
<div id="pie">
<p>© Copyright</p>
</div>
</body>
</html>
Si nos fijamos en el vínculo, es decir, el elemento a, encontramos que su padre es el elemento p en el que está anidado. Es, además, descendiente de div id="contenido", de body, y en última instancia de html.
Ahora al revés. Nos fijamos en el primer div. Vemos que es hijo de body y descendiente de html; también es hermano de div id="pie", y padre del h1; y los p a los que engloba —que por tanto son hermanos entre sí—. Y, por supuesto, es ascendiente de a.
Así, puede seleccionarse un elemento concreto de un documento en base a estas relaciones, según estos métodos:
Selección de descendientes: Su sintaxis es elemento elemento …{…}, en el que los elementos se indican según la secuencia de nodos que se recorre hasta alcanzar el objetivo al que se aplican las reglas, de izquierda a derecha. Por ejemplo:
Ejemplos:
#contenido p{
padding:5px;
}
#navegacion a.seccion-actual{
font-weight:bold;
}
Con la primera regla, el estilo no se aplicaría a todos los párrafos de la página, sino exclusivamente a los descendientes de un div con id="contenido". Con la segunda, sólo a los vínculos con class="seccion-actual" dentro de la lista identificada como navegacion.
Selección de hijos: Su sintaxis es elemento>elemento{…}:
Ejemplo:
#contenido>p{
margin:1em;
}
En este ejemplo, a diferencia del anterior, la regla sólo se aplicaría a los párrafos hijos de #contenido, pero no que sean hijos de elementos contenidos en él.
Internet Explorer 6 no comprende la selección de hijos. Al encontrar este tipo de selectores, ignora la regla.
Selección de hermanos adyacentes: Selecciona de la cadena el último elemento que sea adyacente a la secuencia de la cadena de elementos. Su sintaxis es elemento+elemento{…}.
Ejemplos:
h1+p{
font-weight:bold;
}
p+p+p{
color:#900;
}
En este caso, la primera regla selecciona cualquier párrafo que tenga como hermano inmediatamente anterior un h1. La segunda regla, selecciona cualquier párrafo que tenga como hermanos inmediatamente anteriores otros dos párrafos, es decir, todos a partir del tercero, éste inclusive.
Por su parte, hay varios métodos para seleccionar un elemento en base a sus atributos:
Especificar el atributo: Sirve para seleccionar un elemento concreto que contenga un atributo concreto. Su sintaxis es elemento[atributo]{…}.
Ejemplo:
a[hreflang]{
background-color:#F3C6E1;
}
La declaración se aplicaría exclusivamente a los vínculos que tuviesen especificado el atributo hreflang, pero no al resto de vínculos.
Especificar el atributo y el valor: Como el anterior, pero además se puede especificar el valor concreto que tiene que tener el atributo. Su sintaxis es elemento[atributo="valor"]{…}.
Ejemplo:
a[hreflang="en"]{
background-color:#F3C6E1;
}
La regla es como la anterior, pero ahora afecta en concretoe a los vínculos que apuntan a páginas en inglés.
Especificar un valor de atributo concreto entre varios aplicados: Se emplea para seleccionar un elemento cuyo atributo permite incluir una lista de valores separados por espacios. Su sintaxis es elemento[atributo~="valor"]{…}.
Ejemplo:
p[class~="advertencia"]{
color:#000;
background-color:#FC0;
}
Esta regla apunta a los párrafos a los que se han aplicado varios valores para class, siempre y cuando alguno de ellos sea advertencia, pero no cuando sea el único.
Al menos eso es lo que dice la especificación para el ejemplo E[foo~="warning"] (inglés): «Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning"». La negrita es mía, y la comprobación de que no se interpreta así en Internet Explorer 6 y 7, Firefox 2.0, Opera 9 ni Safari 3 —beta de Windows—, también.
Seleccionar parcialmente el valor de un atributo: Se emplea para seleccionar una parte de un valor que consiste en literales separados por un guión. Está pensado principalmente para seleccionar subcódigos de idiomas. Su sintaxis es elemento[atributo|="valor"]{…}.
Ejemplo:
a[hreflang|="en"]{
background-color:#F3C6E1;
}
Esta regla seleccionaría cualquier vínculo que apunte a una página en inglés, independientemente de la variedad del mismo; englobaría, por ejemplo, valores de en-GB y en-US.
Como el caso anterior, la especificación para el ejemplo E[lang|="en"] (inglés) dice: «Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en"». Si lo interpreto correctamente, en el caso de que ese valor parcial aparezca sin guión ni subcódigo no debería aplicarse el estilo, pero no se interpreta así en Internet Explorer 6 y 7, Firefox 2.0, Opera 9 ni Safari 3 —beta de Windows—. Aunque, como en el caso anterior, puede que yo esté equivocado.
Hasta aquí, lo que se refiere a los selectores de CSS 2.1. Quien lo desee puede ver la página de ejemplo de selectores aplicados.
Como hemos dicho arriba, los pseudoselectores funcionan como los selectores descritos hasta ahora, pero se aplican a estados o aspectos de un elemento que no pueden ser marcados en el código. Por ejemplo, el estado de :visited de un vínculo no corresponde a un elemento de un XHTML, sino del comportamiento de un usuario frente a un vínculo que se le ha proporcionado. Otro ejemplo es que no se puede marcar por medio de una etiqueta la primera línea de un párrafo, porque la línea como tal se refiere a una circunstancia de contexto: no incluirá las mismas palabras dependiendo de la resolución del monitor, del ancho del elemento que contenga el texto, o del tamaño de letra que haya seleccionado el usuario.
Técnicamente, los pseudoselectores se dividen en pseudoelementos y pseudoclases, y de sus características sólo nos interesan algunas:
Pseudoelementos: Su sintaxis es elemento:pseudoelemento{…}, pero sólo pueden añadirse al último elemento simple del selector. Además, afectan a la especificidad de una regla tal y como lo hacen los elementos; veremos que significa esto en la sección de «Herencia y cascada».
Los pseudoelementos de CSS 2.1 sólo se pueden aplicar a elementos que contengan texto, y son:
:first-letter: Se refiere a la primera letra del texto incluido en el elemento.
Este pseudoelementos sólo acepta las propiedades de color y fondo, márgenes, relleno y borde, fuente, float, vertical-align —aunque sólo si el valor de float es none—, text-decoration, text-transform, line-height, letter-spacing y word-spacing.
:first-line: Se refiere a la primera línea del texto incluido en el elemento.:before: Inserta contenido después del texto del elemento.:after: Inserta contenido antes del texto del elemento.Pseudoclases: Su sintaxis es elemento:pseudoclase{…}, pero a diferencia de los pseudoelementos pueden aparecer añadidas a cualquier elemento de un selector. Afectan a la especificidad de una regla igual que lo hacen las clases.
Las pseudoclases de CSS 2.1 son:
:first-child1: Se puede aplicar a cualquier elemento, y se refiere al primer hijo del mismo.:link: Se puede aplicar a hipervínculos, y se refiere al estado del vínculo cuando aún no ha sido visitado.:visited: Se puede aplicar a hipervínculos, y se refiere al estado de vínculo ya visitado.:hover: Se puede aplicar a cualquier elemento, y se refiere al estado en que el usuario ha situado el puntero del ratón sobre él.:active: Se puede aplicar a cualquier elemento, y se refiere al estado en el que el usuario hace clic sobre él.:focus: Se puede aplicar a cualquier elemento, y se refiere al estado del elemento cuando obtiene el foco.Faltaría incluir :lang(), pero como hasta la fecha sólo lo ha soportado Internet Explorer 5 para Macintosh, no es muy aplicable.
Con respecto a los tres últimos, la especificación no define qué elementos aceptan este estado (inglés), aunque el consenso dice que debería poder aplicarse a cualquier elemento.
Ver la página de ejemplo de pseudoselectores aplicados.
Para simplificar una hoja de estilo y reducir su tamaño, es buena idea agrupar elementos a los que se asignen las mismas declaraciones. Para ello se incluyen en el mismo selector separados por comas. Por ejemplo:
#cabecera, p, blockquote, .nota{
margin:1em 0;
}
Esta regla aplicaría el margen al elemento identificado con cabecera, a los párrafos y bloques de cita, y a cualquier elemento con la clase nota. Equivaldría a:
#cabecera{
margin:1em 0;
}
p{
margin:1em 0;
}
blockquote{
margin:1em 0;
}
.nota{
margin:1em 0;
}
Por último, quedaría decir que cualquiera de los selectores y pseudoselectores anteriores pueden combinarse para crear reglas específicas:
#contenido-principal div.noticia-destacada a:hover strong{
font-weight:normal;
}
#informacion-adicional ul li:first-child{
border-left:1px solid #000;
}
Narradas, la primera regla sería: «elimina la negrita de todo strong que aparezca en un vínculo sobre el que el usuario sitúe el puntero del ratón, siempre y cuando el vínculo aparezca en un div con la clase noticia-destacada, y que tal div se encuentre dentro del elemento cuyo id sea contenido-principal». Para la segunda: «aplica el borde al primer ítem de lista no ordenada que aparezca en el elemento identificado como informacion-adicional».
Y con esto, concluye la explicación acerca de los selectores.
Por supuesto, el soporte de los selectores —y sobre todo de los pseudoselectores— no es consistente entre los navegadores. Se pueden emplear los ejemplos que incluyo para comprobar como se comportan los diversos navegadores, aunque si se quiere una tabla-resumen sobre el soporte actualizada con frecuencia recomiendo la de quirksmode.org (inglés). Sólo indicar que en la parte de selectores incluye algunos de CSS 3.
