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 básicos de CSS. En este vídeo vamos a seguir viendo diferentes tipos de selectores que existen en CSS.

El selector universal se representa mediante un asterisco. Cuando se incluye en una regla, el selector universal selecciona todos los elementos. ¿Cuándo lo utilizarás? Probablemente nunca, al menos yo desaconsejo su uso, es difícil tenerlo bajo control y puedes estar aplicando estilos sin darte cuenta. En muchas situaciones, el selector universal se puede omitir.

El selector universal se aplica a veces para inicializar todos los elementos de una página web a un mismo estado. En este ejemplo, el margen y el relleno de todos los elementos se establece en cero píxeles.

Habrás comprobado que algunos enlaces cambian de color cuando ya estuviste en esa página, cuando los mantienes pulsados o se modifica su estilo cuando pasas el ratón por encima de ellos. Gracias al carácter “:”, vamos a ver cómo hacer todo esto. Para ver el funcionamiento de estos selectores vamos a utilizar un ejemplo nuevo.

El estado :link, solo aplicable a enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla. En este caso, suponemos que tanto “Índice”, como “Visitado”, son enlaces visitados. El segundo porque se navegó a la página “visit.html” en algún momento y el primero porque la página en la que nos encontramos es “index.html”. Puede ser una buena idea que hagas unas pruebas si no te quedó claro.

El estado :visited se aplicará a los hipervínculos visitados, es el selector complementario a :link. Por tanto, en este ejemplo esta regla de CSS se aplica a los dos primeros enlaces.

El estado :hover modifica el estilo cuando el puntero del ratón está sobre un elemento al que se le aplica la regla. Como puedes ver en el ejemplo, todos los enlaces tienen el estilo aplicado, pero solo lo muestra el enlace “Visitado”, puesto que tiene el puntero sobre él. Es posible utilizar :hover en todos los elementos, no solo en los hipervínculos.

En caso de enlaces, es muy importante declarar :hover después de :link y :visited, en caso de que existan, para que :hover funcione correctamente. Ten en cuenta que los dispositivos táctiles, como tabletas o teléfonos inteligentes (smartphones), no tienen la capacidad de situar el puntero sobre un elemento sin pulsarlo.

Utiliza con cabeza todo esto. Por ejemplo, a la hora de mostrar u ocultar menús o tu página no será accesible a multitud de usuarios.

El estado :active se aplica a enlaces que están siendo pulsados. Normalmente no mantenemos pulsado un hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para casos particulares como pueden ser los menús desplegables. Al pulsar se activa el estilo definido por esta regla de CSS, y al dejar de pulsar se deja de aplicar la regla.

De nuevo, es necesario declarar :active después de :hover, para que tenga efecto. Que :active y :hover tengan los mismos estilos puede ser una solución elegante al problema de accesibilidad desde tabletas y teléfonos inteligentes que te comentaba hace un momento, el único inconveniente es que solo servirá para hipervínculos, puesto que :active solo se aplica a este tipo de elementos.

Puedes utilizar :link, :visited y :active solos para aplicarlos a todos los enlaces de la página, aunque es más común verlos acompañados del selector “a”. También es posible utilizarlos en combinación con clases e identificadores, así como en anidamientos, del mismo modo que con los selectores básicos.

Así como los enlaces tienen selectores particulares, los elementos de formulario, que aceptan entradas por parte del usuario (campos de texto, listas desplegables, etc.) también tienen un selector que puede resultar interesante para destacar el elemento que está activo o, siendo rigurosos, el elemento que tiene el foco. Este selector también se puede aplicar a los enlaces, ya que pueden recibir el foco desde el teclado.

Como habrás podido comprobar, he vuelto a cambiar el código HTML para este ejemplo, puesto que necesito campos de formularios. Para mejorar la experiencia del usuario, puede ser una buena práctica resaltar los campos de formulario que están siendo utilizados en cada momento.

Para ello, utilizamos el selector :focus como en el ejemplo. Puedes ver cómo se destaca el campo que está activo.

Ahora te invito a que veas el vídeo “CSS: selectores avanzados”, en el que se explican algunos de los selectores avanzados que puedes emplear para crear reglas de CSS más complejas. 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.