▷ Selectores CSS de ID, CLASE y DESCENDIENTES

 

🎯 Selectores CSS: Universal, ID, Clase y Descendientes

Cuando aplicamos estilos en CSS, necesitamos una forma de decirle al navegador a qué elementos se le deben aplicar esos estilos. Para eso existen los selectores, y en esta guía te mostraré algunos de los más utilizados: el selector universal, por ID, por clase y selectores descendientes.

---

🌐 Selector Universal *

El selector universal aplica estilos a todos los elementos del documento HTML.

📄 Sintaxis:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

📝 Este tipo de selector es muy usado para "reiniciar" estilos por defecto del navegador.

---

🆔 Selector por ID #

Un ID es un identificador único para un solo elemento en tu documento. Si usas el selector por ID, debes asegurarte de que ese id no se repita.

📄 HTML:

<h1 id="titulo">Bienvenido a mi web</h1>

🎨 CSS:

#titulo {
  color: blue;
  text-align: center;
}

🔎 El estilo se aplicará solo al elemento con id="titulo".

---

📛 Selector por Clase .

Una clase se puede aplicar a varios elementos. Es muy útil para reutilizar estilos en diferentes partes del documento.

📄 HTML:

<p class="resaltado">Este texto está resaltado.</p>
<div class="resaltado">Otro elemento resaltado.</div>

🎨 CSS:

.resaltado {
  background-color: yellow;
  font-weight: bold;
}

✨ Todos los elementos con la clase resaltado recibirán el mismo estilo.

---

📂 Selectores Descendientes

Este tipo de selector se usa para aplicar estilos a un elemento solo si está dentro de otro.

📄 HTML:

<div class="contenedor">
  <p>Este párrafo está dentro del div</p>
</div>

<p>Este párrafo está fuera del div</p>

🎨 CSS:

.contenedor p {
  color: red;
  font-style: italic;
}

🔍 En este ejemplo, solo el párrafo que está dentro del div con clase "contenedor" tendrá el estilo rojo e itálico.

---

📌 Resumen Rápido

• * → Selector universal, aplica a todos los elementos.
• #id → Selecciona un único elemento con ese ID.
• .clase → Selecciona todos los elementos con esa clase.
• padre hijo → Aplica estilos al hijo solo si está dentro del padre.

---

🧪 ¿Por qué es importante dominar estos selectores?

Porque te permiten tener un control total sobre qué elementos se ven afectados por los estilos. Es la base de cualquier hoja de estilo bien organizada y escalable.

Además, al combinar selectores puedes lograr diseños complejos sin necesidad de escribir estilos repetidos.

En el siguiente video te muestro como se usan los selectores CSS descritos en este artículo.

🗨️ ¿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! 📚✨