Tokenlabor

CSS-Spezifität berechnen

CSS-Spezifität berechnen und vergleichen: Der Rechner zerlegt jeden Selektor in IDs, Klassen und Typen nach Selectors Level 4, inklusive :is(), :not(), :has() und :where().

    –

     

    SelektorSpezifitätIDsKlassenTypenRang

    Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

    So wird die Spezifität berechnet

    Der Rechner für CSS-Spezifität zeigt, welcher Selektor gewinnt, wenn mehrere Regeln dasselbe Element treffen. Die Spezifität berechnen Browser als drei Zahlen (A, B, C): A zählt ID-Selektoren, B zählt Klassen, Attributselektoren und Pseudoklassen wie :hover, C zählt Typselektoren wie p und Pseudoelemente wie ::before. Verglichen wird von links nach rechts; eine einzige ID schlägt also beliebig viele Klassen. Der Universalselektor * und Kombinatoren wie > zählen nicht.

    Für die Selektor-Gewichtung nach Selectors Level 4 gelten Sonderregeln: :is(), :not() und :has() zählen so viel wie ihr spezifischstes Argument, :where() zählt immer null und eignet sich deshalb für leicht überschreibbare Grundstile. :nth-child(… of S) zählt als Pseudoklasse plus das spezifischste Argument von S. Die alten Pseudoelemente mit einem Doppelpunkt wie :before werden wie Typselektoren gezählt.

    In der Kaskade kommt die Spezifität erst nach Herkunft, !important, Kaskadenebenen aus @layer und Inline-Stilen im style-Attribut zum Zug; bei gleicher Spezifität gewinnt die später notierte Regel. Statt mit !important oder gehäuften IDs gegen zu spezifische Regeln anzukämpfen, helfen flache Klassenselektoren, :where() und Ebenen. Grenzen: Der Rechner bewertet den Nesting-Selektor & nicht, weil seine Spezifität von der umgebenden Regel abhängt.

    Anleitung: CSS-Spezifität in 3 Schritten

    1. Tragen Sie Selektoren ein, einen je Zeile; Selektorlisten mit Komma werden getrennt bewertet.
    2. Lesen Sie für jeden Selektor die Spezifität sowie die Zahl der IDs, Klassen und Typen ab.
    3. Vergleichen Sie über die Spalte „Rang“, welcher Selektor gewinnt, wenn mehrere dasselbe Element treffen.

    Typische Anwendungsfälle

    • Stilkonflikte lösen: Herausfinden, warum eine Regel trotz späterer Position nicht greift.
    • Bibliotheken überschreiben: Prüfen, wie spezifisch ein eigener Selektor sein muss, um Stile eines Frameworks zu überschreiben.
    • CSS aufräumen: Gehäufte IDs und lange Selektorketten finden und durch flache Klassen oder :where() ersetzen.
    Fragen

    Häufige Fragen

    Wie wird die CSS-Spezifität berechnet?

    Als drei Zahlen A, B und C. A ist die Zahl der IDs, B die Zahl der Klassen, Attributselektoren und Pseudoklassen, C die Zahl der Typselektoren und Pseudoelemente. Verglichen wird zuerst A, bei Gleichstand B, dann C.

    Schlagen elf Klassen eine ID?

    Nein. Die Werte werden nicht zu einer Dezimalzahl addiert, sondern spaltenweise verglichen. Eine ID mit (1,0,0) gewinnt gegen jede Zahl von Klassen (0,n,0).

    Welche Spezifität hat :where()?

    Immer null, egal was in den Klammern steht. :is(), :not() und :has() übernehmen dagegen die Spezifität ihres spezifischsten Arguments.

    Wo stehen Inline-Stile und !important?

    Deklarationen im style-Attribut gewinnen gegen alle Selektoren aus Stylesheets. !important hebt eine Deklaration in eine eigene Stufe der Kaskade, die vor der Spezifität ausgewertet wird. Unter mehreren !important-Regeln entscheidet wieder die Spezifität.

    Was passiert bei gleicher Spezifität?

    Dann gewinnt die Regel, die im Quelltext später steht. Regeln in Kaskadenebenen mit @layer werden vorher nach der Reihenfolge der Ebenen sortiert; Stile außerhalb jeder Ebene gewinnen gegen Stile in Ebenen.

    Wie überschreibe ich einen CSS-Stil ohne !important?

    Nutzen Sie einen etwas spezifischeren Selektor, etwa eine zusätzliche Klasse, oder notieren Sie die Regel bei gleicher Spezifität später. Mit @layer lassen sich Fremdstile in eine niedrigere Ebene legen, sodass eigene Regeln auch mit geringerer Spezifität gewinnen.

    Welche Spezifität hat ein Attributselektor?

    Dieselbe wie eine Klasse, also (0,1,0). Das gilt auch für [id="x"]: Als Attributselektor zählt er wie eine Klasse, nicht wie der ID-Selektor #x.

    Weitere Werkzeuge

    Das könnte auch helfen

    Alle 358 Werkzeuge

    Farbumwandler

    HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.

    Öffnen

    Farbpalette aus Bild

    Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.

    Öffnen

    Kontrast prüfen (WCAG)

    Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.

    Öffnen

    CSS-Gradient-Generator

    Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.

    Öffnen

    Box-Shadow-Generator

    CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.

    Öffnen

    Flexbox-Generator

    Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.

    Öffnen