Probador de selectores CSS
Pega algo de HTML, escribe cualquier selector CSS y ve al instante con qué elementos coincide, resaltados en la página renderizada y en el árbol del código, además del número de coincidencias y la especificidad del selector.
Última actualización:
Los scripts nunca se ejecutan y no se cargan imágenes ni estilos externos. Tu HTML se queda en tu navegador.
Elementos coincidentes
Cómo usar Probador de selectores CSS
- Pega tu HTML en el cuadro HTML o sube un archivo .html. La página de ejemplo se carga por defecto.
- Escribe un selector CSS, por ejemplo
.card > h3oli:nth-child(odd), o haz clic en uno de los ejemplos. - Revisa el resultado: el contador muestra cuántos elementos coinciden y los elementos coincidentes reciben un contorno naranja en la vista previa.
- Cambia a Código para ver el árbol DOM analizado con cada coincidencia numerada, y haz clic en cualquier coincidencia de la lista para ir a ella.
- Lee los cuadros de especificidad (ID, clase, tipo) para entender qué regla gana en tu hoja de estilos.
Referencia rápida de selectores CSS
| Selector | Coincide con | Especificidad |
|---|---|---|
p | Todos los elementos <p> | 0, 0, 1 |
.price | Elementos con class="price" | 0, 1, 0 |
#main-nav | El elemento con id="main-nav" | 1, 0, 0 |
[data-price], a[href^="https"] | Tiene el atributo / el atributo empieza por | 0, 1, 0 / 0, 1, 1 |
nav a | Cualquier <a> dentro de <nav> (descendiente) | 0, 0, 2 |
ul > li | <li> que son hijos directos de <ul> | 0, 0, 2 |
h2 + p | El <p> justo después de un <h2> | 0, 0, 2 |
h2 ~ p | Todos los <p> hermanos después de un <h2> | 0, 0, 2 |
li:nth-child(2n+1) | Elementos impares de la lista (1.º, 3.º, 5.º…) | 0, 1, 1 |
p:not(.intro) | Párrafos sin la clase "intro" | 0, 1, 1 |
.card:has(img) | Tarjetas que contienen una imagen | 0, 1, 1 |
:where(h2, h3) | Cualquier h2 o h3, con especificidad cero | 0, 0, 0 |
p::first-line | Pseudoelemento (no seleccionable con querySelectorAll) | 0, 0, 2 |
Cómo decide la especificidad qué regla gana
Cuando dos reglas definen la misma propiedad en el mismo elemento, el navegador compara su especificidad de izquierda a derecha: gana el selector con más IDs; si empatan, gana el que tiene más clases, atributos y pseudoclases; si siguen empatados, gana el que tiene más selectores de tipo y pseudoelementos. Si la especificidad es idéntica, gana la regla que aparece después en el CSS. Los atributos style en línea se imponen a cualquier selector, y !important anula las declaraciones normales sin importar la especificidad.
Un consejo práctico: mantén la especificidad baja y uniforme (sobre todo clases simples) para que los componentes sean fáciles de sobrescribir, y usa :where() para los valores por defecto que deban ser triviales de reemplazar.
Por qué el código puede diferir de lo que pegaste
La pestaña Código muestra el DOM que el navegador construyó realmente, no tu texto original. Los analizadores HTML añaden los elementos <html>, <head>, <body> y <tbody> que faltan, cierran las etiquetas sin cerrar y reorganizan el anidamiento no válido (un elemento de bloque dentro de un <p> termina el párrafo). Los selectores se ejecutan sobre ese DOM, así que esta vista explica la mayoría de las sorpresas del tipo "por qué no coincide".
Preguntas frecuentes
¿Cómo funciona el probador de selectores CSS?
El navegador analiza tu HTML en una vista previa aislada y el selector se ejecuta con document.querySelectorAll, el mismo motor que usan tus hojas de estilos y tu JavaScript. Cada elemento coincidente se resalta con un contorno y se incluye en la lista.
¿Cómo se calcula la especificidad CSS?
La especificidad son tres números (A, B, C). A cuenta los selectores de ID, B cuenta las clases, los selectores de atributo y las pseudoclases, y C cuenta los selectores de tipo y los pseudoelementos. El selector universal * y los combinadores no suman nada. :is(), :not() y :has() toman la especificidad de su argumento más específico, y :where() siempre cuenta como cero. Gana la A más alta, luego la B y luego la C.
¿Por qué mi selector no coincide con nada?
Las causas habituales son una errata en el nombre de una clase, un combinador que falta (un espacio significa descendiente, > significa hijo directo) o HTML que el analizador reescribe: por ejemplo, un <div> dentro de un <p> cierra el párrafo, y las tablas reciben un <tbody> automático. Abre la pestaña Código para ver el DOM exactamente como lo construyó el navegador.
¿Funcionan :hover y :focus aquí?
Las pseudoclases de estado como :hover, :focus y :active solo coinciden mientras el usuario interactúa con el elemento, así que en una prueba estática normalmente no coinciden con nada. Las pseudoclases estructurales y basadas en atributos como :checked, :disabled, :required, :empty y :nth-child() funcionan por completo.
¿Se admite :has()?
Sí, si tu navegador lo admite (Chrome, Edge, Safari y Firefox 121 o posterior). El probador usa el motor nativo de tu navegador, así que un selector no compatible muestra un mensaje de selector no válido.
¿Se envía mi HTML a algún sitio?
No. Todo se ejecuta en tu navegador. La vista previa es un marco aislado que bloquea scripts, formularios e imágenes u hojas de estilos externas, así que pegar HTML no confiable es seguro.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.