Tabla de Selectores CSS
| Categoría | Selector | Ejemplo | Qué selecciona |
|---|---|---|---|
| Básicos | Universal | * | Todos los elementos |
| De etiqueta (o tipo) | p | Todos los elementos <p> | |
| De clase | .mi-clase | Elementos con class="mi-clase" | |
| De ID | #mi-id | El elemento con id="mi-id" | |
| Combinadores | Descendiente | div p | Todos los <p> dentro de un <div> |
| Hijo directo | div > p | <p> que son hijos directos de un <div> | |
| Hermano adyacente | h2 + p | Primer <p> inmediatamente después de un <h2> | |
| Hermanos generales | h2 ~ p | Todos los <p> hermanos siguientes de un <h2> | |
| De atributo | Atributo exacto | [type="text"] | Elementos con type igual a "text" |
| Atributo empieza por | [href^="https"] | Elementos con href que empieza por "https" | |
| Atributo termina en | [src$=".jpg"] | Elementos con src que termina en ".jpg" | |
| Atributo contiene | [title*="info"] | Elementos con title que contiene "info" | |
| Pseudoclases | Hover | a:hover | Enlaces <a> cuando el mouse pasa por encima |
| Focus | input:focus | Campos <input> cuando reciben el foco | |
| Primer hijo | li:first-child | Primer <li> de su contenedor | |
| Nth-child | tr:nth-child(odd) | Filas impares de una tabla | |
| Last-child | p:last-child | Último hijo <p> dentro de su contenedor | |
| Pseudoelementos | Primera línea | p::first-line | La primera línea de un párrafo |
| Primera letra | p::first-letter | La primera letra de un párrafo | |
| Before (antes del contenido) | div::before | Agrega contenido antes del contenido real del elemento | |
| After (después del contenido) | div::after | Agrega contenido después del contenido real del elemento |
