Selectores CSS 2.1, Parte 1

Selectores CSS 2.1, Parte 1

Traducción al español del artículo en www.456bereastreet.com
, escrito por Roger Johansson

Una de las primeras cosas que aprendes cuando comienzas con CSS son los selectores.

Los selectores son obviamente una parte fundamental de las CSS, pero son pocos los
desarrolladores que los utilizan a su capacidad máxima. Si bien puedes hacer mucho con solamente con los selectores de tipo, ID y clase, hay muchos más.

Aprender cómo usar el rango completo de selectores disponibles en CSS 2.1 ciertamente puede ayudarte a mantener tu HTML mucho más limpio. Te permitirá minimizar el uso innecesario del atributo class y la necesidad de agregar elementos div y span extraños al código de tu página. Suena bien, no?

Entonces, ¿por qué no se usa completamente todo el rango de selectores? La razón más importante ha sido el insuficiente soporte de Internet Explorer hasta e inicluso la versión 6. Todos los demás recientes navegadores soportan la mayoría o todos los selectores CSS 2.1. Ten presente esto antes de correr a usar todo lo que se describe en estas series.

Como hay tantos selectores CSS, un solo artículo explicándolos todos sería muy largo. Para hacer la información más sencilla de digerir Roger Johannson los ha dividido en tres partes:

1. Parte 1, este artículo, explica las bases de selectores además del universal, el tipo, id, y los selectores de clases.


2. Parte 2 es acerca de los combinadores, selectores combinados, agrupamiento, y selectores de atributo.
3. Parte 3 será toda acerca de pseudo-clases y pseudo-elementos.

Se postearán los artículos periódicamente y se vincularán a las demás partes a medida que son publicadas. Muy bien entonces. Comencemos.

Las bases de selectores

Al comienzo las cosas más básicas. Un selector CSS está hecho de un patrón que es hecho coincidir contra todos los elementos del árbol del documento. Cuando todas las condiciones en el patrón son verdaderas, el selector coincide y las declaraciones dentro de la regla son aplicadas al elemento o al elemento que coincide. Considera esta sencilla regla CSS:

p { color:#f00; }

El selector es la parte de la regla CSS que viene antes de la llave de apertura, “{“. El selector aquí es p, que encontrará todos los elementos p en el documento y hace cualquier texto que contenga rojo. Muy básico.

Descripción del Selector

Ok, eso fue un ejemplo realmente simple. Vamos a describir más tarde todos los otros selectores, y ahí las cosas se van a volver un poco más complicadas. Antes que eso sin embargo, he aquí una descripción de la sintaxis para todos los selectores CSS 2.1 (basados en la tabla en CSS 2.1, 5.1 Coincidencia de patrones):

Descripción de la sintaxis CSS 2.1 de selectores

Selector type	Patrón	Descripción
Universal	*	Encuentra cualquier elemento.
Tipo	E	Encuentra cualquier elemento E.
Clase	.info	Encuentra cualquier elemento cuyo atributo class contiene el valor info.
ID	#footer	Encuentra cualquier elemento con un id igual a footer.
Descendiente	E F	Encuentra cualquier elemento F que es un descendiente de un elemento E.
Hijo	E > F	Encuentra cualquier elemento F que es un hijo de un elemento E.
Adyacente	E + F	Encuentra cualquier elemento F inmediatamente precedido por un elemento hermano E.
Atributo	E[att]	Encuentra cualquier elemento E que tiene un atributo att , a pesar de su valor.
Atributo	E[att=val]	Encuentra cualquier elemento E que tiene un atributo att cuyo valor de atributo es exactamente igual a val.
Atributo	E[att~=val]	Encuentra cualquier elemento E cuyo atributo valor att es una lista de valores separados por espacios, uno de los cuales es exactamente igual a val.
Atributo	E[att|=val]	Encuentra cualquier elemento E cuyo atributo att tiene una lista de valores comenzando por val separada por guión.
La pseudo-clase :first-child	E:first-child	Encuentra el elemento E cuando E es el primer hijo de su padre.
Las pseudo-clases link	E:link E:visited	Encuentra links no visitados aún (:link) ó aquellos ya visitados (:visited).
Las pseudo-clases dinámicas	E:active E:hover E:focus	Encuentra E durante ciertas acciones del usuario.
La pseudo-clase :language	E:lang(c)	Encuentra elementos del type E que estan en el lenguaje c.
El pseudo-elemento :first-line	E:first-line	Encuentra los contenidos de la primera linea formateada del elemento E.
El pseudo-elemento :first-letter	E:first-letter	Encuentra la primera letra de un elemento E.
Las pseudo-elementos :before y :after	E:before E:after	Usado para insertar contenido generado antes o después del contenido de un elemento.

Explicaremos más adelante cada uno de estos tipos de selectores con más detalle en este artículo de dos partes, así que mantente leyendo. Unos pocos términos usados en esa tabla en el resto de este artículo tal vez necesite alguna aclaración:

Descendiente

Un elemento que es el hijo, nieto ó descendiente tardío de un elemento en el árbol del documento.

Ancestro

Un elemento que es el padre, abuelo o ancestro anterior de un elemento en el árbol del documento.

Hijo

El descendiente directo de un elemento. Ningún otro elemento debe venir entre los dos en el árbol del documento.

Padre

El ancestro directo de un elemento. Ningún otro elemento debe venir entre los dos en el árbol del documento.

Hermano

Un elemento que tiene el mismo padre que el elemento actual.

Selectores simples y combinados

Existen dos categorías básicas de selectores: simples y combinados.

Un selector simple consiste de tanto un selector de tipo o el selector universal seguido de cero o más selectores de atributos, selectores de ID, o pseudo-clases. La siguiente regla contiene un ejemplo de un selector simple:

p.info { background:#ff0; }

Un selector combinado(a veces llamado selector contextual) consiste de dos o más selectores separados por un combinador. Este es un ejemplo muy simple de un selector combinado:

div p { font-weight:bold; }

El código anterior aplicará a todos los elementos p que son descendientes del elemento div.

Un pseudo-elemento puede puede ser adjuntado a un selector. En un selector combinado, un pseudo-elemento puede ser solo adjuntado al último selector simple.

Detalles acerca de selectores combinados, combinadores, y pseudo-elementos pueden ser encontrados en la Parte 2 y Parte 3 en esta serie.

El selector universal

El selector universal es representado por un asterisco, "*", y encuentra todos los elementos en el documento. Es bastante raro verlo en una CSS, pero el selector universal es actualmente bastante utilizado con selectores de clase y de Id. Si el selector universal no es el único componente de un selector simple, entonces el "*" podría omitirse:

.myclass es equivalente a *.myclass#myid es equivalente a *#myid

Un uso para el selector universal que se ha vuelto bastante popular es usarlo para establecer los margenes y "paddings" de todos los elementos a cero:

* { margin:0; padding:0; }

Esto es a veces referido como el Global White Space Reset.

Selectores de tipo

Un selector de tipo encuentra cada instancia de un tipo particular de elemento. La siguiente regla encuentra todos los elementos párrafo en el documento y establece su tamaño de fuente a 2em:

p { font-size:2em; }

El selector de clase

El selector de clase es representado por un ".", y apunta a elementos basados en el valor de su atributo class. La siguiente regla aplicará a todo elemento p con una clase de nombre "info":

p.info { background:#ff0; }

Es posible asignar múltiples nombres de clase a un elemento - el atributo class puede tener una lista de nombres de clase separadas por espacios. Los selectores de clase pueden entonces ser usados para apuntar a elementos que tengan varios nombres de clase. Esta regla encontrará los elementos p que tengan ambas "info" y "error" en su lista de nombres de clase:

p.info.error { color:#900; font-weight:bold; }

El tipo de elemento no tiene que ser especificado. Dejarlo es lo mismo que usar un selector universal en lugar de un selector de tipo. Esta regla encontrará todos los elementos con un nombre de clase "info" más allá de su tipo:

.info { background:#ff0; }

El selector de ID

El selector de ID es representado por un numeral, "#", y apunta a elementos basados en el valor de su atributo id. Esta regla aplicará a un elemento cuyo id es "info", más allá de cual tipo de elemento sea:

#info { background:#ff0; }

Si además se especifica el tipo de elemento, la regla solamente aplicará a los elementos de ese tipo:

p#info { background:#ff0; }

Es importante recordar que los selectores de ID tienen mayor especificidad que los selectores de clase, y que un valor de Id debe ser único dentro de un documento. Por lo tanto un selector de ID puede solo aplicar a un único elemento en un documento.

Continuará…

Ok, eso es todo para la Parte 1 de esta serie de artículos.