Chuleta de selectores CSS: probador en vivo, nth-child, ::before | We.Inc
Escribe cualquier selector CSS y mira qué elementos selecciona en una página de ejemplo, junto con su especificidad. Incluye todos los grupos de selectores, una calculadora de fórmulas nth-child, recetas de ::before y ::after y :has().
Los selectores le dicen a CSS a qué elementos se aplica una regla. Los básicos son el de tipo (p), clase (.card), ID (#main), atributo ([type=email]), los combinadores (descendiente con espacio, hijo >, hermanos + y ~), las pseudoclases como :hover y :nth-child(2n) y los pseudoelementos como ::before. Escribe un selector abajo para ver qué selecciona.
Los selectores detrás de la mayoría de las hojas de estilo
Selector
Selecciona
Especificidad
Todos los elementos p
.card
Elementos con la clase card
El elemento con id main
nav a
a en cualquier lugar dentro de nav
ul > li
li que son hijos directos de ul
a:hover
Un enlace bajo el puntero
Leer una tabla de selectores solo te lleva hasta cierto punto. El probador de abajo pasa tu selector por el propio motor del navegador sobre una pequeña página de ejemplo, resalta cada elemento que selecciona, explica las entradas no válidas y calcula la especificidad. La calculadora de debajo responde a la eterna pregunta de qué elementos elige realmente 3n+1.
Escribe un selector en el probador o haz clic en uno de los ejemplos para cargarlo.
Los elementos que coinciden en la página de ejemplo se iluminan, y el recuento se actualiza mientras escribes.
Lee la especificidad como tres números: IDs, luego clases y similares, y luego tipos de elemento.
Usa la calculadora de nth-child para probar cualquier fórmula An+B sobre una lista de hasta 30 elementos.
Aplica estilos con clases en lugar de IDs. Una clase mantiene baja la especificidad, así que las reglas posteriores y las clases utilitarias todavía pueden sobrescribirla.
Usa :focus-visible en lugar de :focus para los anillos de foco. Muestra el anillo a quienes usan el teclado sin que parpadee en cada clic del ratón.
::before y ::after necesitan una propiedad content, aunque sea una cadena vacía, o no se generan en absoluto.
Envuelve las listas largas de selectores en :is() para acortarlas, o en :where() cuando quieras que tengan especificidad cero.
Preguntas frecuentes
¿Cuál es la diferencia entre nth-child y nth-of-type?
:nth-child(2) cuenta todos los elementos hermanos y luego comprueba que el segundo también cumpla el resto del selector. :nth-of-type(2) cuenta solo los hermanos con la misma etiqueta. Así, p:nth-child(2) no selecciona nada si el segundo hijo es un h2, mientras que p:nth-of-type(2) sigue encontrando el segundo párrafo.
¿Cuál es la diferencia entre ::before y :before?
Son el mismo pseudoelemento. Los dos puntos dobles se introdujeron para distinguir los pseudoelementos de las pseudoclases, y los navegadores siguen aceptando los dos puntos simples en los cuatro más antiguos (before, after, first-line, first-letter) por compatibilidad. En código nuevo, escribe los dos puntos dobles.
¿Qué hace :has()?
:has() selecciona un elemento según lo que contiene o lo que le sigue; por ejemplo, .card:has(img) da estilo a las tarjetas que tienen una imagen, y label:has(+ input:invalid) da estilo a una etiqueta situada antes de un campo no válido. Funciona en todos los navegadores principales actuales, y Firefox fue el último en añadirlo, a finales de 2023.
¿Cómo se calcula la especificidad?
Cuenta tres cosas: los selectores de ID; las clases, los selectores de atributo y las pseudoclases; y después los selectores de tipo y los pseudoelementos. Compara de izquierda a derecha, así que un ID gana a cualquier número de clases. :where() no suma nada, mientras que :is(), :not() y :has() toman la puntuación de su argumento más específico. Los estilos en línea y !important están por encima de todo esto.
¿Por qué mi estilo :hover no se ve en los móviles?
Las pantallas táctiles no tienen estado hover, así que los navegadores lo omiten o lo aplican brevemente tras un toque. Envuelve los estilos que solo dependen de hover en @media (hover: hover) y asegúrate de que todo lo que se muestra con hover también se pueda alcanzar con un toque y con el teclado.
Cómo lee el navegador un selector
Los navegadores evalúan los selectores de derecha a izquierda. Para nav ul li a, el motor empieza con todos los enlaces de la página y luego sube para comprobar que haya un li, un ul y un nav. Por eso la parte más a la derecha, llamada selector clave, es la que más influye en la velocidad, aunque en páginas normales la velocidad de los selectores rara vez es un problema real.
Una coma crea una lista de selectores, que no es más que varios selectores que comparten una regla. Si uno solo de ellos no es válido, se descarta la regla entera, salvo dentro de :is() y :where(), que toleran las entradas no válidas.
Pseudoclases frente a pseudoelementos
Una pseudoclase, escrita con dos puntos simples, selecciona un elemento existente en un estado o posición concretos: :hover, :checked, :first-child, :empty. Un pseudoelemento, escrito con dos puntos dobles, crea o apunta a una parte que no es un elemento propio en el HTML: ::before, ::placeholder, ::selection, ::marker.
Solo se permite un pseudoelemento por selector compuesto, y debe ir al final. El contenido añadido con ::before y ::after suele leerse en voz alta en los lectores de pantalla, pero no se puede seleccionar ni copiar, así que no pongas ahí información esencial.
Mantener la especificidad bajo control
La mayoría de las guerras de especificidad empiezan cuando un ID o una larga cadena de selectores anidados gana a una regla posterior más sencilla. Los nombres de clase planos, con uno o dos niveles de profundidad como mucho, hacen que cada regla sea fácil de sobrescribir.
Las capas de cascada (@layer) ofrecen otra herramienta: las reglas de una capa posterior ganan a las de una anterior sin importar la especificidad. Los resets y los estilos de terceros pueden ir en una capa baja para que tus propias clases siempre ganen.
Selectores básicos y de atributo
Selectores simples
Selector
Ejemplo
Selecciona
Todos los elementos
Tipo
Todos los elementos button
Clase
.price
class contiene price
ID
id es checkout
Atributo presente
[disabled]
Tiene el atributo, con cualquier valor
Valor exacto
[type="email"]
El valor es exactamente email
Empieza por
[href^="https"]
El valor empieza por https
Termina en
[href$=".pdf"]
El valor termina en .pdf
Contiene
[class*="btn"]
El valor contiene btn en cualquier parte
Palabra en una lista
[rel~="noopener"]
La lista separada por espacios incluye la palabra
Prefijo de idioma
[lang|="en"]
en, o en- seguido de cualquier cosa
Sin distinguir mayúsculas
[href$=".PDF" i]
Selecciona .pdf, .PDF, etc.
Combinadores
Relaciones entre elementos
Combinador
Ejemplo
Selecciona
Descendiente (espacio)
nav a
a a cualquier profundidad dentro de nav
Hijo >
ul > li
li directamente dentro de ul
Hermano siguiente +
El p inmediatamente después de un h2
Hermanos posteriores ~
Cada p después de un h2 con el mismo padre
Lista de selectores ,
Cualquiera de los dos
Pseudoclases
Estado, estructura y lógica
Pseudoclase
Selecciona
:hover
Bajo el puntero del ratón
:focus
Tiene el foco del teclado o por código
:focus-visible
Tiene el foco y el navegador considera que debe mostrarse un anillo
:focus-within
Él mismo o un descendiente tiene el foco
:active
Se está pulsando
:visited
Un enlace ya visitado (estilos limitados por privacidad)
:checked / :disabled / :required
Controles de formulario en ese estado
:valid / :invalid / :user-invalid
Estados de validación de formularios; user-invalid espera a que haya interacción
:placeholder-shown
Un input que está mostrando su placeholder
:first-child / :last-child / :only-child
Posición entre los hermanos
:nth-child(An+B) / :nth-last-child()
Posición según una fórmula, contando todos los hermanos
:nth-of-type() / :first-of-type
Posición contando solo la misma etiqueta
:empty
Sin hijos y sin texto
:not(x)
No coincide con x
:is(x, y) / :where(x, y)
Coincide con cualquiera de la lista; where tiene especificidad cero
:has(x)
Contiene algo que coincide con x, o va seguido de ello
:root
El elemento html
:target
El elemento cuyo id está en el hash de la URL
Pseudoelementos y recetas de ::before / ::after
Partes de un elemento
Pseudoelemento
Apunta a
::before / ::after
Contenido generado antes o después del contenido del elemento
::first-letter / ::first-line
Primera letra o primera línea mostrada de un bloque
::placeholder
El texto de placeholder de un input
::selection
El texto que el usuario ha resaltado
::marker
La viñeta o el número de un elemento de lista
::file-selector-button
El botón de un input de archivo
::backdrop
La capa detrás de un diálogo modal o de un elemento a pantalla completa
Asterisco de obligatorio, icono de enlace externo y comillas
Cada decoración vive en el CSS, así que el HTML queda limpio. content es obligatorio en ambos pseudoelementos.
:hover, :focus-visible y :has() juntos
Pulsa Tab hasta el campo para ver el anillo. La tarjeta se pone roja solo mientras contiene un email no válido.
Inicio
Sitio asociado
Carta
Platos de temporada, renovados cada semana.
Pregunta por los alérgenos.
Sopa
Ensalada
Risotto
Tarta
Café
Nombre
Nota
Probador de selectores
Selector
Selectores de ejemplo
Ese no es un selector válido en este navegador.
{n} elemento seleccionado
{n} elementos seleccionados
La especificidad se lee como IDs, clases, tipos. El tercer elemento, Risotto, tiene la clase featured; el primer párrafo tiene el id intro.
Calculadora de nth-child
Fórmula dentro de :nth-child( )
Número de elementos: {n}
Ejemplos de fórmulas
Usa una forma como 2n+1, -n+3, odd, even o un solo número.