Todos los selectores CSS comunes, agrupados por familia: básicos, combinadores, pseudoclases, pseudoelementos y selectores de atributo. Cada fila empareja el selector con un ejemplo de una línea.
Un selector elige los elementos a los que se aplica una regla. La especificidad decide qué regla gana cuando varias coinciden: inline gana a id, id gana a clase, clase gana a tipo. Lee los selectores de derecha a izquierda: el navegador coincide primero la parte más a la derecha y luego sube por los combinadores. Las familias de abajo cubren casi todo lo que escribirás.
Tabla de referencia · 53 entradas
Selectores CSSExplained
53 of 53 rows
Básicos
Todos los elementos de esa etiqueta.
button { }
Los elementos con esa clase.
.active { }
El único elemento con ese id.
#header { }
Todos los elementos.
* { box-sizing: border-box; }
La raíz del documento; el lugar habitual para las propiedades personalizadas globales.
:root { --gap: 1rem; }
Los elementos que coinciden con A o B (agrupamiento).
h1, h2, h3 { }
Combinadores
Cualquier B descendiente de A.
nav a { }
B que es hijo directo de A.
ul > li { }
B inmediatamente después de A, con el mismo padre.
h1 + p { }
Todo B que va después de A, con el mismo padre.
h1 ~ p { }
Pseudoclases (estado)
El elemento mientras el puntero está encima.
a:hover { }
El elemento que tiene el foco del teclado.
input:focus { }
Un elemento que es el primer hijo de su padre.
li:first-child { }
El n-ésimo hijo; admite fórmulas como 2n.
tr:nth-child(2n) { }
Los elementos que no coinciden con ningún selector interno; admite una lista desde Selectors 4.
li:not(:first-child, .skip) { }
Un checkbox, un radio o una opción marcado.
input:checked { }
Un campo o un botón deshabilitado.
button:disabled { }
Un padre que contiene una coincidencia del selector interno.
li:has(ul) { }
Cualquier selector de la lista; la especificidad es la más alta de la lista.
:is(ol, ul) li { }
Igual que :is(), pero con especificidad cero.
:where(ol, ul) li { }
El foco que debe mostrar un anillo, normalmente desde el teclado.
a:focus-visible { }
Un elemento que tiene el foco él mismo, o un descendiente suyo lo tiene.
form:focus-within { }
Un elemento que es el último hijo de su padre.
li:last-child { }
Un elemento sin hermanos.
p:only-child { }
El n-ésimo hermano de la misma etiqueta; admite fórmulas como 2n.
p:nth-of-type(2n) { }
El primer o el último hermano de la misma etiqueta.
p:first-of-type { }
Un elemento sin hijos y sin texto.
td:empty { }
Los enlaces no visitados y los ya visitados.
a:visited { }
Los campos marcados como requeridos y los dejados como opcionales.
input:required { }
Los campos cuyo valor pasa o falla sus reglas de validación.
input:invalid { }
Un campo que el usuario no puede editar.
input:read-only { }
El elemento cuyo id coincide con el fragmento de la URL.
#note:target { }
La opción preseleccionada o el botón predeterminado de un grupo.
input:default { }
Un checkbox puesto en estado indeterminado por un script.
input:indeterminate { }
Cualquier elemento nativo, o un elemento personalizado una vez registrado.
my-widget:defined { }
Un elemento en el idioma indicado.
p:lang(fr) { }
Pseudoelementos
Un nodo de contenido generado antes del elemento.
label::before { content: ""; }
Un nodo de contenido generado después del elemento.
code::after { content: ";"; }
La primera letra de un bloque de texto.
p::first-letter { }
El texto indicativo de un campo.
input::placeholder { }
La primera línea de un bloque de texto.
p::first-line { }
El texto que el usuario ha resaltado.
::selection { }
La viñeta o el número de un elemento de lista.
li::marker { }
La zona detrás de un elemento a pantalla completa o un diálogo.
dialog::backdrop { }
El botón de explorar dentro de un campo de archivo.
input::file-selector-button { }
Una parte del shadow DOM que el host ha expuesto.
my-widget::part(header) { }
Selectores de atributo
Los elementos que tienen el atributo, con cualquier valor.
[required] { }
El atributo es exactamente igual a val.
[type="submit"] { }
El atributo empieza por val.
a[href^="https"] { }
El atributo termina por val.
a[href$=".pdf"] { }
El atributo contiene val.
a[href*="login"] { }
Una lista separada por espacios que incluye val.
[class~="badge"] { }
El valor es igual a val o empieza por val seguido de un guion.