CSS Gewichtung (Spezifität)

Mario Code , ,
0

Habt ihr euch schon des öfteren gefragt warum manche styles bevorzugt werden und ihr konntet es euch einfach nicht erklären warum der Browser jetzt den Style nimmt und nicht den anderen? Und dann habt ihr aus purer Verzweiflung !important genommen und gut wars…erstmal…aber dann wars doch irgendwie unbefriedigend.

Dann lag das mit Sicherheit an der Gewichtung der CSS Styles.

CSS Gewichtung Punktesystem

Die verschiedenen DOM-Elemente werden verschieden gewichtet und bekommen quasi Punkte. Das Element/Style mit den meisten Punkten wird dann beim parsen verwendet und angezeigt.

Für die verschiedenen DOM-Elemente werden unterschiedliche Gewichtungen verteilt. Ich werde das anhand eines Punktesystems erläutern.

Ein Tag bekommt nur 1 Punkt:
div {background-color: grey;}

pseudo Klassen haben 10 Punkte:
a:first-child

Ein class hat 100 Punkte:
.test {background-color: green;}

Der ID ist mit 1.000 Punkten dabei:
#message {background-color: yellow;}

Ein in-element-style erhält 10.000 Punkte
<div style="background-color: red"></div>

Und das allseits beliebte !important wird mit 100.000 Punkten bewertet.
Hier übersichtlicher in einer Tabelle:

HTML/CSSGewichtung/Punkte
HTML-Elemente (Tags)1
:pseudo10
.class100
#ID1.000
In-Element10.000
!important100.000

Addition der CSS Gewichtungen

Je nachdem wie man seine Styles schreibt addieren sich die einzelnen Gewichtungen/Punkte.
Hier ein paar Beispiele:

Tag/CSSGewichtung/Punkte
a1
ul li2 ( 1 + 1 )
div:empty11 ( 1 + 10 )
div.mdodiv101 ( 1 + 100 )
div#mdodiv1.001 ( 1 + 1.000 )
div#mdodiv !important101.001 ( 1 + 1.000 + 100.000 )

Gerade im Hinblick auf die Gewichtung ist es essentiell notwenig auf die genaue Schreibweise der Styles zu achten.
Schreibt man div#mdodiv anstatt ohne mit einem Leerzeichen div #mdodiv dann verändert sich die Addition der Gewichtung, da beide Schreibweisen etwas völlig anderes bedeuten.

div#mdodiv „füge dem DIV mit dem ID=mdodiv den Style zu“
div #mdodiv „füge allen Elementen die den ID=mdodiv besitzen und von einem DIV eingeschlossen sind den Style zu“

Ein kleiner Unterschied in der Schreibweise mit großer Auswirkung!

Hier für euch noch ein paar Codepens zur Veranschaulichung. Ihr könnt mit diesen auch gerne rumprobieren, testen, Reihenfolgen und Schreibweisen verändern, um ein noch besseres Gefühl für die Gewichtungen zu bekommen.

ul li => 2

See the Pen CSS specifity example 0.5 by Mario Domandl (@mdo-code) on CodePen.

div:empty => 11

See the Pen CSS specifity example 1 by Mario Domandl (@mdo-code) on CodePen.

div.mdodiv => 101

See the Pen CSS specifity example 2 by Mario Domandl (@mdo-code) on CodePen.

div#mdodiv => 1001

See the Pen CSS specifity example 3 by Mario Domandl (@mdo-code) on CodePen.

inline Style

See the Pen CSS specifity example 4 by Mario Domandl (@mdo-code) on CodePen.

!important

See the Pen CSS specifity example 5 by Mario Domandl (@mdo-code) on CodePen.

!important Addition

See the Pen CSS specifity example 6 by Mario Domandl (@mdo-code) on CodePen.

Immer auf die Schreibweise achten!

See the Pen CSS specifity example 7 by Mario Domandl (@mdo-code) on CodePen.

 

Schreibe einen Kommentar