CSS Selektor Tester
Sehen Sie, was Ihr Selektor erreicht

Was ein CSS Selektor Tester macht

Ein Selektor ist eine Frage an Ihr Markup. Dieser CSS Selektor Tester beantwortet sie vor Ihren Augen, also fällt das Rätselraten weg. Fügen Sie das Markup ein, tippen Sie den Selektor und lesen Sie die erreichten Elemente.

Vier Fragen deckt die Arbeit meist ab. Erstens, auf welche Elemente passt dieser Selektor? Dann, was sagt der Selektor eigentlich in klaren Worten? Danach, wie stark ist er gegen eine Konkurrenzregel? Zuletzt, was ist der kürzeste Selektor für ein Element, auf das Sie zeigen können?

Dies ist kein Stylesheet Werkzeug. Da das Verkleinern und Aufräumen von CSS zu einer anderen Aufgabe gehört, übernimmt der CSS Minifier diese Seite. Hier geht es um den Abgleich, und um nichts anderes.

Nichts zu installieren. Deshalb fügen Sie ein Fragment ein, lesen die Antwort und schließen den Tab, wann es Ihnen passt.

Wie ein CSS Selektor Tester arbeitet

Die Arbeit teilt sich in drei Durchgänge. Zuerst liest die Seite Ihr Markup in einen Baum aus Tags und Attributen. Dann wird dieser Baum als echte Elemente nachgebaut, die der Seite nie beitreten. Zuletzt läuft Ihr Selektor gegen die nachgebaute Kopie, und die Treffer kommen in Dokumentreihenfolge zurück.

Der Abgleich ist der des Browsers selbst. Da die Regeln von Selectors Level 4 lang und voller Sonderfälle sind, würde eine selbst geschriebene Engine früher oder später von echten Seiten abweichen. Also fragt diese Seite die Engine, die schon in Ihrem Browser steckt, denn dieselbe Engine wird über Ihre Seite urteilen.

Die nachgebaute Kopie bleibt abgetrennt. Dadurch hat sie keine Stile, keine Skripte und kein Layout. Das ist Absicht, denn die Frage hier lautet, welche Elemente ein Selektor erreicht, und nicht, wie sie aussehen würden.

Testen Sie einen Selektor gegen Ihr eigenes Markup

Ein Selektor, der in einem Tutorial funktioniert, kann Ihr Markup dennoch verfehlen. Deshalb ist Ihr eigenes Fragment die ehrliche Probe, eingefügt wie es ist. Kopieren Sie einen Block aus dem Seitenquelltext und lassen Sie ihn hinein.

Jeder Treffer kommt mit seinem Zusammenhang. So erhalten Sie zuerst die Zahl, danach jedes getroffene Element mit seinem öffnenden Tag, und den Pfad, der von oben im Fragment dorthin führt.

Der Pfad ist der nützliche Teil. Da zwei Treffer oft gleich aussehen, zeigt der Pfad, welcher welcher ist. Danach lässt sich ein Selektor, der ein Element zu viel fängt, leicht verengen.

Ein leeres Ergebnis ist auch eine Antwort. Doch es ist die Antwort, die Leute überlesen, also sagt die Seite klar, dass nichts gepasst hat, statt ein leeres Feld zu zeigen.

Was vor dem Abgleich verworfen wird

Dieses Werkzeug behandelt Ihre Eingabe als Text, nie als Seite. Also lässt der Nachbau script und style Tags, iframes und Einbettungen vollständig weg.

Ereignis Attribute gehen den gleichen Weg. Da ein onclick oder ein onerror nur auf einer lebenden Seite zählt, verwirft der Nachbau sie samt den Tags, die sie trugen. Eine javascript: Adresse in einem href verliert ihr Tag ebenfalls.

Der Rest überlebt unberührt. Deshalb sind Ihre Klassen, ids, data Attribute und die Verschachtelung alle noch da, damit der Selektor darauf passen kann.

jQuery Selektor Tester ohne jQuery

Die Hälfte der Selektoren, die Leute einfügen, ist überhaupt kein CSS. Stattdessen kommen sie von jQuery, das eigene Formen wie :first, :eq() und :contains() hinzufügte. Ein einfacher CSS Selektor Tester würde sie schlicht abweisen.

Dieser antwortet trotzdem. Da sich jene Formen auf eine Position oder einen Texttest über einer Trefferliste auflösen, wendet die Seite sie selbst an, nachdem der CSS Teil gelaufen ist. So lebt ein jQuery Selektor Tester hier ohne eine Zeile jQuery auf der Seite.

Die Seite zeigt die Übersetzung, statt sie zu verstecken. Deshalb sehen Sie, welcher Teil Standard CSS war und welchen Teil die Seite danach übernommen hat. Auf diese Weise hält ein Selektor, den Sie auf reines querySelectorAll übertragen, keine Überraschungen bereit.

Manche Formen haben keine Entsprechung. Dennoch nennt die Seite sie, statt zu tun als ob, und das ist das Einzige, was man mit einem Selektor Sinnvolles tun kann, auf den nichts passen kann.

Wie sich :first und :eq von CSS unterscheiden

Die Fallen sind die, die harmlos aussehen. Zum Beispiel wählt :first ein Element aus der ganzen Trefferliste, während :first-child und :first-of-type nach der Stellung eines Elements unter seinen Geschwistern fragen.

Dieser Unterschied beißt bei echtem Markup. Da eine Liste mit zehn Einträgen zehn first-of-type Kandidaten in zehn verschiedenen Eltern hat, ist dennoch nur einer davon der erste Treffer der Liste. Also beantworten die zwei Formen verschiedene Fragen.

CSS Spezifität Rechner

Der Abgleich ist nur die halbe Geschichte einer Regel. Die andere Hälfte ist die Stärke, die die Kaskade durch Zählen der Teile eines Selektors klärt. Also meldet dieser CSS Spezifität Rechner diese Zählung als die drei Zahlen, die Browser tatsächlich nutzen.

Die drei Zahlen sind leicht zu lesen. Zuerst kommen id Selektoren, danach Klassen, Attribute und Pseudoklassen, und zuletzt Elementnamen und Pseudoelemente. Danach ist der Vergleich ein einfaches Lesen von links nach rechts.

Inline Stile und important stehen außerhalb des Dreierpaars. Die Seite sagt jedoch, wo sie landen, denn eine Regel, die auf dem Papier verliert, kann im Browser aus einem dieser zwei Gründe dennoch gewinnen.

Die Regeln zur Spezifität belohnen kurze Selektoren. Deshalb ist ein Selektor mit niedrigerer Punktzahl oft der bessere zum Ausliefern, da er später leicht zu überschreiben bleibt.

Welcher von zwei Selektoren gewinnt

Zudem fügen Sie zwei Selektoren ein, und die Antwort kommt sofort. Da beide Dreierpaare nebeneinander erscheinen, ist der Sieger sichtbar, ohne etwas von Hand zu zählen.

Die Seite nennt einen Gleichstand einen Gleichstand. Dann gewinnt die Regel, die später im Stylesheet steht, und die Seite sagt es, statt es Ihnen zu überlassen.

Lesen Sie einen Selektor in klaren Worten

Ein langer Selektor verbirgt seine eigene Bedeutung. Also liest die Seite ihn als Satz zurück, Teil für Teil, in der Reihenfolge, in der der Browser sie anwendet.

Das Lesen braucht überhaupt kein Markup. Da die Erklärung aus der Struktur des Selektors selbst kommt, können Sie einen Selektor aus einem Code Review prüfen, bevor Sie die Seite haben, zu der er gehört.

Bei Kombinatoren rutschen Leute aus. Deshalb werden ein Leerzeichen, ein Größer als Zeichen, ein Plus und eine Tilde jeweils in Worten genannt, denn Nachfahre, Kind, nächstes Geschwister und späteres Geschwister sind vier verschiedene Fragen.

Dieselbe Gewohnheit hilft bei Markup, das Sie nicht geschrieben haben. Nach einem kurzen Blick auf den Selektor erklärt ein Blick auf die Ausgabe des HTML Minifier oder auf den Seitenquelltext meist den Rest.

Ein Selektor für ein einzelnes Element

Manchmal kommt das Element zuerst und Sie brauchen den Selektor dafür. Also wählen Sie einen Knoten im eingelesenen Baum, und die Seite bietet den kürzesten Selektor, der nur dieses Element erreicht.

Kurz ist das Ziel, nicht raffiniert. Da eine id allein oft genügt, versucht die Seite das zuerst, danach eine Klasse, und erst dann einen Pfad durch die Eltern.

Was diese Seite nicht macht

Sie führt Ihr JavaScript nicht aus. Da die nachgebaute Kopie absichtlich träge ist, passt ein Selektor, der ein gelaufenes Skript voraussetzt, hier nicht.

Sie passt nicht auf Zustände. Das ist jedoch eine Eigenschaft jedes abgetrennten Markups: hover, focus, visited und target beschreiben eine lebende Seite, also bleiben sie leer.

Sie gestaltet nichts. Ein Selektor Tester beantwortet, welche Elemente, und das Aussehen dieser Elemente ist eine eigene Frage an den Browser, für den Sie ausliefern.