▷ 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.

 Fuente de la imagen

No te olvides darle LIKE y SUSCRIBIRTE al blog y a mi canal si te gustó el video. Si gustas realizar una DONACIÓN para ayudarme a mejorar el canal y mi contenido, puedes hacerlo mediante el botón ❤$GRACIAS ubicado en la parte posterior del video en YouTube o visitando el enlace https://linktr.ee/ezavalar y haciendo clic en el botón Donaciones.