Probador de selectores CSS
Mira qué alcanza tu selector

Qué hace un probador de selectores CSS

Un selector es una pregunta sobre tu marcado. Este probador de selectores CSS la responde delante de ti, así que las conjeturas desaparecen. Pega el marcado, escribe el selector y lee los elementos que alcanzó.

Cuatro preguntas cubren casi todo el trabajo. Primero, ¿con qué elementos coincide este selector? Después, ¿qué dice en realidad el selector en palabras llanas? A continuación, ¿cuánta fuerza tiene frente a una regla rival? Por último, ¿cuál es el selector más corto para un elemento que puedes señalar?

Esta no es una herramienta de hojas de estilo. Como reducir y ordenar CSS pertenece a otro trabajo, el minificador de CSS se encarga de ese lado. Aquí el tema es la coincidencia, y nada más.

Nada que instalar. Por lo tanto, pegas un fragmento, lees la respuesta y cierras la pestaña cuando te convenga.

Cómo funciona un probador de selectores CSS

El trabajo se divide en tres pasadas. Primero, la página lee tu marcado en un árbol de etiquetas y atributos. Después, ese árbol se reconstruye como elementos reales que nunca se unen a la página. Por último, tu selector se ejecuta contra la copia reconstruida, y las coincidencias vuelven en orden de documento.

El comparador es el del propio navegador. Como las reglas de Selectors Level 4 son largas y están llenas de casos límite, un motor escrito a mano acabaría discrepando de las páginas reales. Así que esta página pregunta al motor que ya viene en tu navegador, ya que ese mismo motor juzgará tu sitio.

La copia reconstruida sigue desconectada. Como resultado, no tiene estilos, ni scripts, ni maquetación. Eso es deliberado, ya que la pregunta aquí es qué elementos alcanza un selector, no cómo se verían.

Prueba un selector contra tu propio marcado

Un selector que funciona en un tutorial puede fallar con tu marcado. Por lo tanto, la prueba honesta es tu propio fragmento, pegado tal como está. Copia un bloque del código fuente de la página y suéltalo ahí.

Cada coincidencia llega con su contexto. Así, primero obtienes el recuento, después cada elemento coincidente con su etiqueta de apertura, y la ruta que lleva hasta él desde lo alto del fragmento.

La ruta es la parte útil. Como dos coincidencias suelen parecer idénticas, la ruta muestra cuál es cuál. Después de eso, un selector que atrapa un elemento de más es fácil de estrechar.

Un resultado vacío también es una respuesta. Aun así, es la respuesta que la gente pasa por alto, así que la página dice con claridad que nada coincidió en lugar de mostrar una caja en blanco.

Qué se descarta antes de la comparación

Esta herramienta trata tu pegado como texto, nunca como una página. Así que la reconstrucción deja fuera por completo las etiquetas script y style, los iframes y las incrustaciones.

Los atributos de evento corren la misma suerte. Como un onclick o un onerror solo importan en una página viva, la reconstrucción los descarta junto con las etiquetas que los llevaban. Una dirección javascript: en un href también pierde su etiqueta.

El resto sobrevive intacto. Por lo tanto, tus clases, ids, atributos data y anidamiento siguen ahí para que el selector pueda compararlos.

Probador de selectores de jQuery sin jQuery

La mitad de los selectores que la gente pega no son CSS en absoluto. En cambio, vienen de jQuery, que añadió sus propias formas como :first, :eq() y :contains(). Un probador de selectores CSS normal simplemente las rechazaría.

Este las responde de todos modos. Como esas formas se resuelven en una posición o una prueba de texto sobre una lista de coincidencias, la página las aplica ella misma después de ejecutar la parte CSS. Así, un probador de selectores de jQuery vive aquí sin una línea de jQuery.

La página muestra la traducción en lugar de esconderla. Por lo tanto, ves qué parte era CSS estándar y qué parte manejó la página después. De ese modo, un selector que estés llevando a querySelectorAll puro no guarda sorpresas.

Algunas formas no tienen equivalente. Aun así, la página las nombra en vez de fingir, que es lo único útil que se puede hacer con un selector que nada puede igualar.

En qué se diferencian :first y :eq de CSS

Las trampas son las que parecen inocentes. Por ejemplo, :first elige un elemento de toda la lista de coincidencias, mientras que :first-child y :first-of-type preguntan por la posición de un elemento entre sus hermanos.

Esa diferencia muerde en marcado real. Como una lista de diez elementos tiene diez candidatos a first-of-type en diez padres distintos, aun así solo uno de ellos es la primera coincidencia de la lista. Así que las dos formas responden preguntas distintas.

Calculadora de especificidad CSS

La coincidencia es solo la mitad de la historia de una regla. La otra mitad es la fuerza, que la cascada resuelve contando las partes de un selector. Así que esta calculadora de especificidad CSS informa de ese recuento como los tres números que los navegadores usan de verdad.

Los tres números son fáciles de leer. Primero vienen los selectores de id, después las clases, los atributos y las pseudoclases, y por último los nombres de elemento y los pseudoelementos. Después de eso, la comparación es una simple lectura de izquierda a derecha.

Los estilos en línea y important quedan fuera del triple. Sin embargo, la página dice dónde aterrizan, porque una regla que pierde sobre el papel todavía puede ganar en el navegador por una de esas dos razones.

Las reglas de especificidad premian los selectores cortos. Por lo tanto, un selector que puntúa más bajo suele ser el mejor para publicar, ya que sigue siendo fácil de sobrescribir después.

Cuál de dos selectores gana

Pega dos selectores y la respuesta es inmediata. Como ambos triples aparecen uno al lado del otro, el ganador se ve sin contar nada a mano.

La página llama empate a un empate. Entonces gana la regla que aparece más tarde en la hoja de estilos, y la página lo dice en vez de dejarte recordarlo.

Lee un selector en palabras llanas

Un selector largo esconde su propio significado. Así que la página lo lee en voz alta como una frase, parte por parte, en el orden en que el navegador las aplica.

La lectura no necesita marcado alguno. Como la explicación sale de la propia estructura del selector, puedes revisar un selector de una revisión de código antes de tener la página a la que pertenece.

Los combinadores son donde la gente resbala. Por lo tanto, un espacio, un signo mayor que, un más y una virgulilla se nombran cada uno con palabras, ya que descendiente, hijo, hermano siguiente y hermano posterior son cuatro preguntas distintas.

La misma costumbre ayuda con marcado que no escribiste. Después de una lectura rápida del selector, un vistazo a la salida del minificador de HTML o al código fuente de la página suele explicar el resto.

Un selector para un solo elemento

A veces el elemento viene primero y necesitas el selector que llega a él. Así que eliges un nodo en el árbol analizado, y la página ofrece el selector más corto que alcanza solo a ese elemento.

El objetivo es que sea corto, no ingenioso. Como un id a solas suele bastar, la página lo prueba primero, después una clase, y solo entonces una ruta por los padres.

Qué no hará esta página

No ejecutará tu JavaScript. Como la copia reconstruida es inerte a propósito, un selector que dependa de que un script se haya ejecutado no coincidirá aquí.

No coincidirá con un estado. Sin embargo, esa es una propiedad de cualquier marcado desconectado: hover, focus, visited y target describen una página viva, así que se quedan vacíos.

No dará estilo a nada. Un probador de selectores responde a qué elementos, y el aspecto de esos elementos es una pregunta aparte para el navegador al que publicas.