Tester di selettori CSS
Guarda cosa raggiunge il tuo selettore

Che cosa fa un tester di selettori CSS

Un selettore è una domanda sul tuo markup. Questo tester di selettori css le risponde davanti a te, quindi le congetture spariscono. Incolla il markup, scrivi il selettore e leggi gli elementi raggiunti.

Quattro domande coprono quasi tutto il lavoro. Per prima cosa, quali elementi raggiunge questo selettore? Poi, che cosa dice davvero il selettore in parole semplici? Dopodiché, quanto è forte contro una regola rivale? Infine, qual è il selettore più corto per un elemento che puoi indicare?

Questo non è uno strumento per fogli di stile. Perché ridurre e riordinare il CSS è un altro lavoro, il minificatore CSS si occupa di quel lato. Qui il tema è il confronto, e nient’altro.

Nulla da installare. Di conseguenza incolli un frammento, leggi la risposta e chiudi la scheda quando ti va.

Come funziona un tester di selettori CSS

Il lavoro si divide in tre passaggi. Per prima cosa la pagina legge il tuo markup in un albero di tag e attributi. Poi quell’albero viene ricostruito come elementi veri che non entrano mai nella pagina. Infine il tuo selettore gira sulla copia ricostruita, e le corrispondenze tornano nell’ordine del documento.

Il motore di confronto è quello del browser. Perché le regole Selectors Level 4 sono lunghe e piene di casi limite, un motore scritto a mano prima o poi si scosterebbe dalle pagine reali. Così questa pagina interroga il motore già presente nel tuo browser, perché è lo stesso motore che giudicherà il tuo sito.

La copia ricostruita resta staccata. Di conseguenza non ha stili, né script, né impaginazione. È voluto, perché la domanda qui è quali elementi un selettore raggiunge, non come apparirebbero.

Prova un selettore sul tuo markup

Un selettore che funziona in un tutorial può comunque mancare il tuo markup. Di conseguenza la prova onesta è il tuo frammento, incollato così com’è. Copia un blocco dal codice sorgente della pagina e mettilo qui.

Ogni corrispondenza arriva con il suo contesto. Così ottieni prima il conteggio, poi ogni elemento raggiunto con il suo tag di apertura, e il percorso che vi conduce dalla cima del frammento.

Il percorso è la parte utile. Perché due corrispondenze spesso sembrano identiche, il percorso mostra quale è quale. A quel punto un selettore che prende un elemento di troppo è facile da restringere.

Un risultato vuoto è comunque una risposta. Tuttavia è la risposta che sfugge, quindi la pagina dice chiaramente che nulla ha corrisposto invece di mostrare una casella vuota.

Che cosa viene scartato prima del confronto

Questo strumento tratta ciò che incolli come testo, mai come una pagina. Così la ricostruzione lascia fuori del tutto i tag script e style, gli iframe e gli embed.

Gli attributi di evento fanno la stessa strada. Perché solo una pagina viva si serve di un onclick o di un onerror, la ricostruzione li scarta insieme ai tag che li portavano. Inoltre un indirizzo javascript: in un href perde anch’esso il suo tag.

Il resto sopravvive intatto. Di conseguenza le tue classi, i tuoi id, gli attributi data e l’annidamento sono tutti ancora lì perché il selettore vi si agganci.

Tester di selettori jQuery senza jQuery

Metà dei selettori che la gente incolla non è CSS affatto. Al contrario viene da jQuery, che ha aggiunto le sue forme come :first, :eq() e :contains(). Un semplice tester di selettori css li rifiuterebbe senz’altro.

Questo invece risponde comunque. Perché quelle forme si riducono a una posizione o a un test sul testo su un elenco di corrispondenze, la pagina le applica da sé dopo che la parte CSS è girata. Così un tester di selettori jquery vive qui senza una riga di jQuery nella pagina.

La pagina mostra la traduzione invece di nasconderla. Di conseguenza vedi quale parte era CSS standard e quale parte la pagina ha trattato dopo. In questo modo un selettore che stai portando a querySelectorAll non riserva sorprese.

Alcune forme non hanno equivalente. In ogni caso la pagina le nomina invece di fingere, che è l’unica cosa utile da fare con un selettore che nulla può raggiungere.

In che cosa :first e :eq differiscono dal CSS

Le trappole sono quelle che sembrano innocue. In particolare :first prende un elemento da tutto l’elenco delle corrispondenze, invece :first-child e :first-of-type chiedono della posizione di un elemento fra i suoi fratelli.

Quella differenza morde sul markup reale. Perché un elenco di dieci voci ha dieci candidati first-of-type in dieci genitori diversi, tuttavia solo uno di essi è la prima corrispondenza dell’elenco. Quindi le due forme rispondono a domande diverse.

Calcolatore di specificità CSS

Il confronto è solo metà della storia di una regola. L’altra metà è la forza, che la cascata risolve contando le parti di un selettore. Così questo calcolatore di specificità css riporta quel conteggio come i tre numeri che i browser usano davvero.

I tre numeri si leggono facilmente. Per prima cosa vengono i selettori di id, poi le classi, gli attributi e le pseudo-classi, infine i nomi degli elementi e gli pseudo-elementi. Dopodiché il confronto è una semplice lettura da sinistra a destra.

Gli stili in linea e important stanno fuori dalla tripletta. Tuttavia la pagina dice dove atterrano, perché una regola che perde sulla carta può comunque vincere nel browser per una di quelle due ragioni.

Le regole di specificità premiano i selettori corti. Di conseguenza un selettore con il punteggio più basso è spesso quello migliore da mandare in produzione, perché resta facile da sovrascrivere più tardi.

Quale dei due selettori vince

Incolla due selettori e la risposta è immediata. Perché entrambe le triplette compaiono una accanto all’altra, il vincitore si vede senza contare nulla a mano.

La pagina chiama un pari un pari. Poi vince la regola che compare più avanti nel foglio di stile, e la pagina lo dice invece di lasciartelo ricordare.

Leggi un selettore in parole semplici

Un selettore lungo nasconde il proprio senso. Così la pagina lo rilegge come una frase, parte per parte, nell’ordine in cui il browser le applica.

La lettura non ha bisogno di alcun markup. Perché la spiegazione viene dalla struttura stessa del selettore, puoi controllare un selettore uscito da una revisione del codice prima di avere la pagina a cui appartiene.

I combinatori sono il punto in cui la gente scivola. Di conseguenza uno spazio, un segno di maggiore, un più e una tilde vengono ognuno nominati a parole, perché discendente, figlio, fratello successivo e fratello più avanti sono quattro domande diverse.

La stessa abitudine aiuta con markup che non hai scritto tu. Dopo una lettura rapida del selettore, un’occhiata all’output del minificatore HTML o al codice sorgente della pagina spiega spesso il resto.

Un selettore per un solo elemento

A volte l’elemento viene prima e ti serve il selettore per esso. Così scegli un nodo nell’albero analizzato, e la pagina propone il selettore più corto che raggiunge solo quell’elemento.

L’obiettivo è corto, non furbo. Perché un id da solo spesso basta, la pagina prova quello per prima cosa, poi una classe, e solo dopo un percorso attraverso i genitori.

Che cosa questa pagina non farà

Non eseguirà il tuo JavaScript. Perché la copia ricostruita è inerte di proposito, un selettore che dipende da uno script già girato qui non corrisponderà.

Non corrisponderà a uno stato. Tuttavia quella è una proprietà di qualunque markup staccato: hover, focus, visited e target descrivono una pagina viva, quindi restano vuoti.

Non darà stile a nulla. Un tester di selettori risponde alla domanda quali elementi, perché l’aspetto di quegli elementi è una domanda a parte per il browser a cui ti rivolgi.