Videotutorial: selectores de CSS

  • Por
  • CSS
Veamos qué son los selectores y cómo nos ayudan a seleccionar elementos de la página a los que aplicar estilos. Veremos y practicaremos con distintos tipos de selectores, de etiquetas, clases, o atributo id.
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.

Esta cuarta parte del curso de CSS en vídeo, sobre los selectores, también se puede ver desde el sitio de Youtube:

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pablo Daniel Almada

25/11/2009
Videos 4:Selectores CSS
Buen video didáctico. Bien explicado los accesos a los elementos especificos para aplicarles estilos.
Gracias.

bous026

12/4/2010
Video Tutorial
Gracias por tu tiempo y esfuerzo en realizar este video tutorial, me ha servido de mucho, sobre todo para repasar visualmente lo estudiado.

Saludos.

joan_01

06/8/2010
capitulo 4 de css
No entendi la diferencia entre el selector ID y el CLASS a parte de indicarlos con # o . en el principio creo que los dos pueden ser utilizados en todos los casos,o entendi mal ?

Bueno gracias por hacer los videos me resulta mucho mas entretenido que leer un pdf generalmente me distraigo muy seguido con ellos aunque es verdad hay que leerlos tambien u_u !!! Saludos !!!

midesweb

16/11/2010
sobre la diferencia entre selectores de identificador y de clase
Hola!
Sobre ese comentario pregunta planteado anteriormente, por favor, lee esta FAQ:
http://www.desarrolloweb.com/faq/diferencia-selector-class-id-css.html

Leandro

16/11/2010
Muchas gracias por subir el vídeo a Youtube
Desde Argentina veo mucho mejor el vídeo en Youtube que en DailyMotion!!
Así que muchas gracias por subir estos vídeos de CSS.

aguja13

10/5/2012
selectores
gracias por estos videos, he podido aprender el poder de los selectores, también que puedo utilizar distintos selectores para atribuír los estilos a los distintos elementos de la página, aunque ahora me lío un poco en saber cuales son los mas convenientes, seguro que se me irán aclarando mientras avenze en el temario, un saludo y gracias por vuestra valiosa información

Ramn

24/7/2012
Diferencia entre ID y Class
En mi opinión una de las diferencias entre ID y Class, es que el css para un #(id) es exclusivo para ese elemento, mientras que una Clase(.Class) puede ser utilizado para casi cualquier otro elemento; por ejemplo si asignas una Clase a todos o por lo menos a varios Divs que forman parte del sidebar, estarías dando estilo a varios elementos con una sola Clase, pero si das estilo a cada Div a través de ID tendrías que dar el estilo a cada uno de los Divs lo que haría que el CSS fuera más grande.

Es mi opinión...

natalych78

31/7/2012
Gracias
Gracias por este excelente videotutorial. No solo contiene información útil, sino que está muy claramente explicado. Gracias!

laika

28/6/2014
Gracias Miguel
Desde hace unos mese me he estado rompiendo la cabeza con eso de las clases e id. Tu me ayudaste muchismo a entenderlo.

Saludos desde Playa del Carmen, Mex.