Siempre me he hecho un poco de lio con la gran cantidad de tipos de selectores que tenemos disponibles en CSS. Así que me tirando de las especificaciones del estandar de CSS2 he tratado de estructurarlo todo un poco, a ver si de este modo me aclaro un poco.

Empezaremos, como no, por lo mas divertido, los selectores de tipos.

Relaciones entre etiquetas

Lo primero que tenemos que saber que en nuestro marcado en XHTML, algunas etiquetas servirán de contenedores de otras, así:

Entonces decimos que la etiqueta div es padre de la etiqueta p, o lo que es lo mismo, la etiqueta p es hija de div.

Podemos tener varios niveles de anidamiento en nuestro marcado, como aqui:

Entonces la etiqueta div es padre de p, y que p es padre de span, por lo tanto podríamos decir que div es "abuela" de span.

Bueno, resulta que en CSS no se habla de abuelos, bisabuelos ni cosas asi, se dice, simplemente que la etiqueta span es descendiente de div, o que div es ascendiente de span, que lo mismo da y da lo mismo.

Y como no, tambien podemos tener cosas como esta:

Donde todo lo dicho antes para la etiqueta span es aplicable a las etiquetas a y acronym.

Con esto surge una nueva relación entre nuestros elementos de marcado, a ver, span, a y acronym son hijas de p, por lo tanto tienen el mismo padre y claro esta son etiquetas hermanas.

Ahora es importante prestar atención al orden en el que aparecen las etiquetas en nuestro código, se dice que la etiqueta a es hermana adyacente de span por que ambas tienen el mismo padre y está justo a continuación de su hermana mayor.

Pero ojo, span NO es hermana adyacente de a, por que aparece en primer lugar. Cosas de familia.

Selectores de tipo

Sabiendo lo anterior, el uso de selectores de tipo en CSS en mucho más sencillo, primero un marcado sencillito para hacer pruebas:

y una regla para todas las capas div, simplemente para verlo bien.

esto nos muestra algo asi:

Ahora podemos acceder a los distintos elementos de marcado mediante selectores de tipo en CSS, mejor con unos ejemplos.

Selector de descencientes

Un selector con la forma A B, equivale cuando el elemento B es descendiente del elemento A.

Selecciona todas las capas div que esten dentro de otra capa div

Selector de hijos

Un selector con la forma A>B equivale cuando B es hijo de A.

Selecciona todos las capas div hijas de maria

Selectores de hermanos adyacentes

Un selector con la forma A+B equivale cuando B es hermano adyacente de A.

Selecciona todas las capas div que sean hermanas adyacentes de otra capa div

Selectores de tipo combinados

Tambien podemos usar combinaciones de los distintos selectores de tipo que hemos visto hasta ahora, y asi, complicar la cosa todo lo necesario.

Selecciona todas las capas hijas de otra capa que a su vez sea hermana adyacente de una capa

Selecciona todas las capas hijas de otra capa que a su vez sea hija de una capa, es decir, selecciona a los nietos.

Luis, Jose y Rosa son nietos de Juan, mientras que Sofia y Jesus lo son de Maria.

Problemas con IE

Lo comentado arriba es lo que dice el estandar sobre CSS del W3C, lo que casi equivale a decir que en Internet Explorer no funciona, o funciona a medias.

De hecho, IE solo reconoce los selectores de descendientes, ni hijos ni hermanos adyacentes, esto es lo que hay. En realidad tampoco reconoce los selectores de atributo de los hablaré en otra ocasión.

Cuando explico esto en clase, la gente suele alucinar con la potencia de todo esto, y con la cantidad de cosas que podemos hacer, y luego tengo que pasar la verguenza de decirles que si quieren que sus páginas sean visualizadas correctamente por el 80% de sus potenciales visitantes se tienen que apañar con la mitad de las herramientas posibles.

Se me parte el corazón.