Aprende a seleccionar elementos con la etiqueta, la clase y el id; agrupa selectores para aplicar la misma regla a varios.
El selector indica a qué elemento o elementos se aplica la regla CSS.
Por etiqueta (p, h1, div) se seleccionan todos los elementos de ese tipo.
Por clase (.nombre) se seleccionan los elementos que tienen class="nombre".
Por id (#nombre) se selecciona el único elemento con id="nombre".
Selecciona todos los elementos del mismo tipo.
Escribir el nombre de la etiqueta HTML como selector aplica la regla a todos los elementos de ese tipo en la página. p { color: red; } afecta a todos los párrafos. Es útil para estilos base, pero poco específico; si quieres afectar solo a algunos, usa clase o id.
Más ejemplos en [web.dev Selectors](https://web.dev/learn/css/selectors) y [LenguajeCSS Selectores básicos](https://www.lenguajecss.com/css/selectores/selectores-basicos/).
Selecciona elementos con class="nombre".
La clase se define en HTML con el atributo class y en CSS con un punto: .destacado selecciona todos los elementos que tengan class="destacado". Un elemento puede tener varias clases (class="btn primario") y se selecciona con .btn o .primario. Las clases son la forma más flexible y reutilizable de aplicar estilos.
Selecciona el elemento con id="nombre".
El id debe ser único en la página. En CSS se usa #nombre para seleccionar el elemento con id="nombre". Tiene mucha especificidad (100 puntos), por eso no se recomienda usarlo para estilos que quieras sobrescribir con facilidad; reserva el id para anclas o para JavaScript.
Misma regla para varios selectores.
Si quieres aplicar exactamente las mismas declaraciones a varios selectores, sepáralos con coma. h1, h2, h3 { margin-top: 1em; } aplica ese margen a los tres. Así evitas repetir el mismo bloque de reglas.
Aprende a seleccionar elementos con la etiqueta, la clase y el id; agrupa selectores para aplicar la misma regla a varios.
Código del tema: display: grid; gap: 1rem;
Selecciona todos los elementos del mismo tipo.
Escribir el nombre de la etiqueta HTML como selector aplica la regla a todos los elementos de ese tipo en la página. p { color: red; } afecta a todos los párrafos. Es útil para estilos base, pero poco específico; si quieres afectar solo a algunos, usa clase o id.
Más ejemplos en web.dev Selectors y LenguajeCSS Selectores básicos.
p { font-size: 1rem; }
h1 { color: #0f172a; }Selecciona elementos con class="nombre".
La clase se define en HTML con el atributo class y en CSS con un punto: .destacado selecciona todos los elementos que tengan class="destacado". Un elemento puede tener varias clases (class="btn primario") y se selecciona con .btn o .primario. Las clases son la forma más flexible y reutilizable de aplicar estilos.
.destacado { background: #fef3c7; }
.btn { padding: 0.5rem 1rem; }Selecciona el elemento con id="nombre".
El id debe ser único en la página. En CSS se usa #nombre para seleccionar el elemento con id="nombre". Tiene mucha especificidad (100 puntos), por eso no se recomienda usarlo para estilos que quieras sobrescribir con facilidad; reserva el id para anclas o para JavaScript.
#cabecera { border-bottom: 1px solid #e2e8f0; }Misma regla para varios selectores.
Si quieres aplicar exactamente las mismas declaraciones a varios selectores, sepáralos con coma. h1, h2, h3 { margin-top: 1em; } aplica ese margen a los tres. Así evitas repetir el mismo bloque de reglas.
h1, h2, h3 {
font-family: system-ui;
color: #0f172a;
}Conecta tipos de selector con el impacto real en conflictos de estilos.
