▷ Selectores CSS 【 TEORÍA 】

 

Selectores CSS

Los selectores CSS son una parte fundamental del lenguaje, ya que permiten seleccionar y aplicar estilos a elementos específicos en un documento HTML. Con ellos, puedes definir cómo se verán las diferentes partes de tu página web.

¿Qué es un Selector CSS?

Un selector es un patrón utilizado en CSS para "apuntar" a uno o más elementos HTML con el fin de aplicarles estilos específicos. Dependiendo del tipo de selector que utilices, puedes seleccionar elementos por su nombre de etiqueta, clase, ID, atributos, entre otros.

Tipos de Selectores CSS

1. Selector Universal

El selector universal (*) selecciona todos los elementos de la página.

Ejemplo:

* {
  margin: 0;
  padding: 0;
}

Este código elimina los márgenes y rellenos de todos los elementos.

2. Selector de Etiqueta

El selector de etiqueta selecciona todos los elementos HTML con un nombre de etiqueta específico.

Ejemplo:

p {
  color: gray;
  font-size: 14px;
}

Este código aplica color gris y un tamaño de fuente de 14px a todos los párrafos (<p>).

3. Selector de ID

El selector de ID utiliza el carácter # seguido del nombre del ID para seleccionar un único elemento con ese identificador.

Ejemplo:

#header {
  background-color: blue;
  color: white;
}

Este código aplica un fondo azul y texto blanco al elemento con el ID header.

4. Selector de Clase

El selector de clase utiliza el carácter . seguido del nombre de la clase para seleccionar elementos con esa clase específica.

Ejemplo:

.button {
  background-color: green;
  border-radius: 5px;
  color: white;
}

Este código aplica un fondo verde, bordes redondeados y texto blanco a todos los elementos con la clase button.

5. Selector Múltiple

El selector múltiple permite aplicar el mismo estilo a varios selectores separándolos con comas.

Ejemplo:

h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}

Este código aplica el mismo estilo a los encabezados <h1>, <h2> y <h3>.

6. Selector Descendente

El selector descendente selecciona elementos que están dentro de otros elementos específicos, utilizando un espacio entre los selectores.

Ejemplo:

div p {
  line-height: 1.5;
}

Este código aplica un interlineado de 1.5 solo a los párrafos (<p>) que están dentro de un <div>.

En este video te muestro un poco de teoría básica referente a los tipos de selectores CSS para diseñar un sitio web.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨