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 explicar los selectores avanzados de CSS.

En primer lugar vamos a ver el empleo del símbolo mayor que, que permite seleccionar los descendientes directos. En el ejemplo, vemos cómo seleccionar los elementos de una lista no ordenada, pero… ¿por qué se seleccionan todos? Como verás, todos los elementos cumplen la regla, están dentro de una etiqueta y son etiquetas . Supongamos que sólo queremos seleccionar los tres elementos de la lista principal.

En un primer momento se nos ocurriría que la lista anidada cumple con el esquema y que dándole un identificador a la principal se soluciona el problema. La idea es buena, pero observa que sigue cumpliéndose la regla. Dentro de la lista no ordenada con identificador “lista” hay 5 elementos de lista. Lo cambio de color para que se vea mejor. Puedo parecer pesado, pero no te imaginas la cantidad de veces que he visto casos como este.

Si entre el selector de la etiqueta superior, en este caso la lista con identificador “lista” y el de las etiquetas anidadas incluimos el carácter “mayor que” (>), solo se seleccionarán los elementos que sean descendientes directos. Desafortunadamente, ni si quiera en CSS3 existe el carácter “menor que” (<) para seleccionar etiquetas padre.

Seguro que te encontrarás con casos en los que quieras aplicar estilos a ciertos elementos dependiendo de si tienen otro elemento junto a ellos o no. En el ejemplo puedes ver cómo funciona el selector + entre dos elementos. En este caso, se aplicarán los estilos a todos los elementos que estén tras una imagen con clase “new”. Ojo, solo a los inmediatamente contiguos. En este caso, no se aplicaría el estilo a la palabra PHP, ya que no sucede inmediatamente a una imagen con clase “new”.

Puede que quieras destacar el primer elemento de una lista, y ya que nos ponemos, ¿por qué no poder darle estilos a la primera línea de un párrafo, o la primera letra de un texto? El selector :first-child de forma conjunta a un elemento, en el ejemplo , aplica la regla al primer elemento de ese tipo, que además sea el primero anidado, en este caso en la etiqueta . En este otro, como el primer con clase “letra” no es el primero de su grupo, no se aplicará el estilo.

Sí, hay un selector :last-child, pero solo a partir de CSS3 y eso lo veremos en otro vídeo. Siguiendo con los primeros de la fila, el selector :first-letter es bastante más intuitivo, se aplica a la primera letra del texto del elemento seleccionado. Puede servirte, por ejemplo, para simular letras capitales.

Por último, el selector :first-line se aplica a la primera línea del texto del elemento seleccionado. ¿Y por qué no utilizar otros atributos propios de ciertas etiquetas para definir los estilos? Vamos a verlo.

El código HTML que utilizaré en esta parte muestra tres párrafos con un enlace cada uno. Si especificamos entre corchetes el nombre de un atributo, en este caso “title”, los estilos se aplicarán a todos los elementos que tengan un atributo “title”, no importa cuál sea su valor. Si quieres especificar más, puedes igualar el atributo a una cadena de texto, en este caso escribimos “title=Buscador”. Ojo, la comparación distingue mayúsculas de minúsculas. Si escribiésemos “buscador” con la letra “b” en minúscula, no se aplicarían los estilos al enlace.

Además, si en la cadena que vas a especificar aparecen caracteres no alfanuméricos, es muy posible que necesites entrecomillarla. Por ejemplo, si quisiéramos hacer referencia a todos los enlaces vacíos (aquellos cuyo atributo href es igual a “#”), o a los enlaces cuyo atributo “title” fuera igual a la cadena “Página del curso”, necesitaríamos especificar, tanto la “#” como la frase entre comillas. Las comillas no molestan, por lo que te recomiendo utilizarlas siempre.

Para seleccionar elementos cuyo atributo empiece por una palabra, como puede ser “top” en el caso de los identificadores de los enlaces del ejemplo, añadimos la barra vertical precediendo al símbolo igual (en la distribución de teclado en español, puedes encontrar este carácter, la barra vertical, en la tecla 1). El valor del atributo del elemento debe ser la palabra completa, como en el caso que vimos anteriormente sin la barra vertical, o seguida de guión, como en este ejemplo.

Y uno más, mediante la virguilla o tilde de la eñe (en la tecla 4, para teclados con distribución en español, o Alt + 126 en el teclado numérico), podemos especificar que el atributo contenga una palabra, esta vez el valor del elemento sí puede estar separado por espacios. En el ejemplo destacamos todos los enlaces cuyo atributo “title” contenga la palabra “curso”.

No sé si te resultará interesante destacar las palabras o textos en otro idioma, pero también es posible centralizar este comportamiento sin necesidad de trabajar con clases. :lang y entre paréntesis el código del idioma según el estándar ISO 639, selecciona todas las etiquetas cuyo valor del atributo “lang” coincida con la especificada entre paréntesis, como en el ejemplo.

Ten cuidado, ya que algunos desarrolladores incluimos el idioma principal de la página en la etiqueta , si le das estilos a este idioma, se aplicará a todos los elementos de tu documento HTML. Mediante CSS también es posible incluir contenido antes o después de la etiqueta seleccionada.

Algo no muy recomendado, ya que el contenido y el estilo deberían separarse, pero bien utilizado, ese contenido, si tiene más que ver con los estilos que con el contenido, entonces sí que hace que esta regla tenga sentido. Por ejemplo, voy a incluir el texto “(Nuevo)” detrás de todos los enlaces cuya clase sea .new y “(DEP)” delante de cada enlace cuya clase sea .old.

Ahora te invito a que veas el vídeo “CSS: selectores CSS3” en el que se explican algunos de los nuevos selectores que se han incorporado en CSS3. Este vídeo está basado en los vídeos “CSS: selectores” y “CSS: selectores avanzados” de Guzmán Fernández que puedes encontrar en estas direcciones de YouTube.

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.