Videotutorial: selectores de CSS

De nuevo con vosotros en una entrega más del videotutorial de CSS, en la que vamos a revisar con profundidad los selectores de CSS, que sirven para definir o acotar los elementos de la página a los que queremos aplicar determinados estilos.

Este videotutorial lo hacemos para complementar las explicaciones de nuestro manual de CSS y además lo estamos publicando después de varios otros vídeos que hemos incorporado en el manual de CSS en vídeo. En vídeos anteriores ya vimos conceptos aun más básicos sobre las hojas de estilo en cascada, como las maneras de incluir CSS en una página, los atributos disponibles, etc.

En el presente vídeo tratamos de hacer un repaso exhaustivo a los selectores de CSS, analizando los tipos de selectores, sus diferencias y los casos en los que sería adecuado utilizarlos. Siendo los selectores en resumen:

• De etiqueta (todos los elementos de la página que son de una etiqueta HTML determinada, como los párrafos, o las listas, etc.)
• De identificador (atributo id de la etiqueta a la que se quiere aplicar estilo)
• De clase (class de CSS)

De cada uno de los tipos de selectores haremos varios ejemplos para que queden claros y reforzaremos conceptos nuevos que acaban de aparecer como lo que son las clases de CSS.

En el vídeo te quedará claro qué es un selector, cómo aplicar estilos a todas las etiquetas de un tipo dado, como aplicar estilos a un elemento en concreto de la página, a través de su identificador único y cómo aplicar estilos a varios elementos a la vez que tienen una misma clase CSS, que se define con el atributo class.

Luego nos detendremos en la combinación de selectores, que es un paso muy habitual que podemos utilizar para seleccionar elementos de manera más precisa y para seleccionar elementos que cumplan varios selectores a la vez. Todo esto lo veremos por la práctica y mostraremos casos en los que seleccionamos elementos con varios selectores a la vez.

Con este videotutorial te quedará claro cómo aplicar selectores de varios tipos a la vez, separados por espacios, para acotar los elementos que seleccionamos atendiendo a una jerarquía de colocación de los mismos en la página. Además explicaremos también cómo utilizar varios selectores, separados por comas, para seleccionar todos los elementos que hacen la unión de los que concuerden con cada selector.

Todo este trabajo es ideal verlo en vídeo y hacer luego vuestras propias pruebas, a fin de afianzar los conocimientos sobre CSS. Así pues, os dejamos sin más con el vídeo de los selectores de CSS, que dura una hora aproximadamente, repleta de ejemplos y consejos para dominar las Hojas de Estilo en Cascada.