Curso de CSS desde cero [completo]Logo de Github
Ver el curso en GitHub
¿Quieres el libro del curso?
Artículos relacionados:

Aprende los SELECTORES en CSS

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programación. Ofreciéndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. También tenemos memes 😏

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en algún punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estará encantada de ayudarte.

Únete al discord

Selectores CSS

Los selectores se usan para encontrar o seleccionar los elementos HTML a los que queremos darle estilo.

Podemos dividirlos en categorías:

  • Simple selector: seleccionan un elemento basado en el nombre, id o clase.
  • Combinator selector: seleccionan elementos basados en relaciones con otros
  • Pseudo-class selector: selecciona en base a cierto estado.
  • Attribute selector: selecciona elementos basados en un atributo o el valor de un atributo

Selector por elemento

Selecciona los elementos HTML basados en el nombre del elemento.

See the Pen CSS | 1.3 - Selectores - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Selector por id

Selecciona el elemento basado en el atributo id del elemento HTML.

El id del elemento es único por lo que el selector solo afectará a un sólo elemento.

Un id no puede empezar con un número

See the Pen CSS | 1.3 - Selectores - 2 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Selector por clase

El selector por clase usa el atributo class para seleccionar los elementos HTML.

Una clase no puede empezar con un número

See the Pen CSS | 1.3 - Selectores by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Selector por clase

También se puede especificar qué elementos con esa clase se ven afectados.

See the Pen CSS | 1.3 - Selectores - 5 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

El selector universal

Selecciona todos los elementos HTML de la página

See the Pen CSS | 1.3 - Selectores - 6 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Agrupar selectores

Se puede agrupar varios elementos que tengan el mismo estilo.

See the Pen CSS | 1.3 - Selectores - 7 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats