Regeln für das Überschreiben
von CSS-Eigenschaften

Addition

Hinweis: Die nicht-konkurierenden Eigenschaften werden zusammengefügt.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

Basiseinstellungen

Hinweis: CSS-Grundeinstellungen werden immer überschrieben.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

Typ-Selektor

Hinweis: Einfache Typ-Selektor P überschreibt die spätere Vererbung von BODY.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

Klassen-Selektor

Hinweis: Die Klasse überschreibt den Typ-Selektor.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

Selektoren-Kombination

Hinweis: Die Kombination aus Id und Klasse, ID.marker, hat 110 Punkte und überschreibt Typ-Selektor P (1 Punkt) und Klasse .marker (10 Punkte).

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

Pseudo-Klassen

Hinweis: Bei gleicher Spezifität gilt die Reihenfolge. Daher ist beiden Pseudoklassen der Links die Reihenfolge unbedingt einzuhalten.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

HTML-Style

Hinweis: Inlinestyle im HTML-Attribut Style haben die zweithöchste Spezifizität. Sind allerdings schlecht zu warten und sollten nur im automatisierten Kontext genutzt werden.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

!important

Hinweis: !important sollte die Ausnahme sein, ist dann aber sehr praktisch.

Reihenfolge der Spezifizität im CSS

CSSBedeutung
Browser-Einstellung (0 Punkte)Nimmt man keine Einstellungen vor, dann gelten die Standardwerte. Z.B. Times New Roman für eine H1. Je nach Browser sind diese unterschiedlich. Diese Browser-Einstellungen haben eine niedrige Spezifizität. Praktisch gesehen werden die Standard-Einstellungen sofort überschrieben.
Universeller Selektor und Vererbung (0 Punkte)Universelle Selektor, *, und Vererbung haben eine sehr niedrige Spezifiziert. Sie werden sofort überschrieben. Es gilt allerdings auch die Regel der Reihenfolge und da der universelle Selektor * immer nach den Basiseinstellungen kommt, überschreibt er die Browsereinstellung.
Typ-Selektoren (1 Punkt)Die reinen HTML Elemente haben eine niedrige Spezifizität. 1 Punkt.
Klassen-Selektoren (10 Punkte)CSS Klassen haben eine mittlere Spezifität.
Attribut-Selektoren (10 Punkte)Attribute Selektoren haben eine mittlere Spezifität.
Pseudoklassen (10 Punkte)CSS Pseudoklassen haben eine mittlere Spezifität.
ID-Selektoren (100 Punkte)CSS Pseudoklassen haben eine hohe Spezifität. Man sollte mit ID die Selektion vornehmen, der ID jedoch keine Styles zuweisen. Eine Kombination ist also empfohlen: ID und Klasse.
KombinationBei Kombinationen werden die Punkte addiert und die Eigenschaft Spezifischer. So hat ein Link mit Pseudoklasse a:hover einen Wert von 11 Punkten und überschreibt damit auch später definierte einzelne Definitionen von A. Man sollte allerdings davon absehen den kompletten HTML-DOM im CSS nachzubauen. Im Modulorientierter Konzeptzion ist ein Ziel mit 1-2, maximal 3 Ebenen auszukommen. Weiteres Beispiel: LI.red.level hat 21 Punkte.
Inlinestile (1000 Punkte)Inlinestile werden im HTML zugefügt und entsprechen 1000 Punkten. Sie sind allerdings schwierig zu verwalten. Viele Javascript-Effekte arbeiten mit Inline-Stilen.
!important (10000 Punkte)Wird eine Eigenschaft um den Zusatz !important ergänzt, so steigt die Spezifizität. !important kann nur von einer späteren !important Eigenschaft überschrieben werden.

► Weitere Infos

Externe Quellen

Selectors Level 3

https://www.w3.org/TR/css3-selectors/#specificity

W3C Recommendation 29 September 2011.


CSS / Kaskade

https://wiki.selfhtml.org/wiki/CSS/Kaskade

Artikel bei Selfhtml in deutscher Sprache.


CSS Specificity

http://www.standardista.com/css3/css-specificity/

Tolle Infografik auf der die Spezifizität mit Fischen als Methaper dargestellt wird.