Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a presentar algunos de los nuevos selectores que existen en CSS3.

Los selectores de CSS3 están definidos en el documento “Selectors Level 3”, una recomendación del W3C de septiembre de 2011. La lista de selectores definidos en CSS3 es enorme. CSS3 incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver algunos de los nuevos selectores de CSS3.

En CSS2 se definió la pseudoclase “:first-child” que permite definir una regla que se aplica al primer hijo del selector indicado. En este ejemplo, se selecciona el primer elemento de la lista y se le aplica el estilo de texto en negrita.

En CSS3 se han añadido estos selectores que complementan a “:first-child” de CSS2. “:last-child” selecciona el último elemento de la lista. Las otras dos pseudoclases seleccionan el hijo enésimo empezando desde el principio o desde el final de la lista de hijos. Por tanto, existe una equivalencia con “:first-child” y “:last-child” cuando ambos selectores, ambas pseudoclases, toman el valor 1.

En este ejemplo se selecciona el segundo elemento de la lista y se le aplica el estilo de texto negrita. Estos selectores son similares a los anteriores, pero seleccionan un hijo entre todos los que son del mismo tipo y que ocupe la posición indicada.

El funcionamiento de estas pseudoclases puede ser un poco confuso, así que vamos a ver un ejemplo para entenderlo mejor. “p:first-child” selecciona un párrafo cuando sea el primer hijo de su padre. En este caso, ningún párrafo es el primer hijo, así que la regla CSS no se aplica. Sin embargo, “p:first-of-type” sí selecciona el primer párrafo “HTML”, aunque sea el segundo hijo de su padre, porque este párrafo es el primer hijo entre todos los hijos de tipo párrafo. ¿Se entiende, está claro?

Por último, en CSS3 se ha añadido este operador, la tilde o virgulilla, para seleccionar un elemento en función de sus hermanos. Este operador es el complemento al operador + definido en CSS2. Vamos a recordar primero el funcionamiento de este operador.

En este ejemplo puedes ver cómo funciona el selector + entre dos elementos. En este caso, se aplica el estilo a todos los elementos que estén justo detrás de un elemento. Sólo se aplica a los inmediatamente contiguos, así que sólo se aplica al primer párrafo.

Sin embargo, al aplicar este otro operador, los elementos no tienen que ser inmediatamente contiguos, sólo tienen que ser hermanos, así que en este ejemplo la regla CSS se aplica a todos los párrafos del fragmento de código HTML.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.