Ein Grafiktablet von Wacom

Update Tutorial - Digital Art

Thema: Brush erstellen mit Paint Tool Sai

Zum Tutorial
HTML Header für Slider

Update Tutorials

Thema: Anker setzen in HTML5

Zum Tutorial

CSS Spezifität

Viele kennen das: Man ändert eine einfache CSS-Anweisung und nichts tut sich. Der Browser ignoriert die neue CSS-Angabe völlig. Doch woran kann das liegen?

 

  • Ihr habt einen Fehler beim schreiben gehabt, ein Zeichen falsch gesetzt oder etwas nicht geschlossen.
  • Die Stylesheet-Datei ist nicht eingebunden im Dokument (nicht lachen, das erlebe ich häufig bei Anfängern und auch Profis!)
  • Die Spezifität von CSS macht euch einen Strich durch die Rechnung

Für den dritten Fall gibt es eine einfache Lösung. Doch erstmal, was ist diese Spezifität?

 

Für CSS Selektoren (Hinweis: Alles was ihr ins CSs schreibt. Eure Klassen und IDs beispielsweise) gibt es eine Art Hierarchie. Es gibt also Selektoren die niedriger gewichtet werden als andere. Ihr müsst euch das so vorstellen: Jeder Selektor bekommt Punkte. Je mehr Punkte ein Selektor bekommt, umso eher kann er wirken und andere Selektoren überschreiben.

 

Folgende Reihenfolge kommt dabei zum Einsatz:
1. Benutzer-Stylesheet mit !important
2. Autoren- Stylesheet mit !important
3. Autoren- Stylesheet
4. Benutzer-Stylesheet
5. Browser-Stylesheet (von jedem Browser vorgegeben)

 

Mit „Benutzer" ist gemeint dass Selektoren direkt ins Markup geschrieben werden, beispielsweise „< div style="background: red" >
Autoren sind die Coder, die alles in die Stylesheet -Datei schreiben

 

Innerhalb von Stylesheet


Innerhalb von Stylesheet-Dateien gibt es auch unterschiedliche Gewichtungen, 4 um genau zu sein.

Gruppe 1: Attribute im Markup. Beispiel: < div style="color:green;" > - 1000 Punkte
Gruppe 2: ID. Beispiel: #idName – 100 Punkte
Gruppe 3: Klasse. Beispiel: .klassenName - 10 Punkte
Gruppe 4: simpler Selektor. Beispiel: div - 1 Punkt
CSS-Selektoren mit einer hohen Spezifität, also einer hohen Punktzahl, überschreiben also die niedrigen Spezifitäten mit den wenigeren Punkten.

 

Hinweis: Bei Deklarationen mit !important gilt Benutzer vor Autor.

Zum besseren Verständnis noch zwei kleine Aufgaben. Folgende Styles haben wir:

<p style=“color: blue“>
p{color: red}

Was wird nun übernommen? Wird der p-tag rot oder blau?

 

Die Lösung: Blau!

 

Nächste Aufgabe:

<p style=“color: blue“>
p{
	color: yellow!important;
}

 

 

Die Lösung: Gelb!

 

Und nun zur letzten, etwas schwereren Aufgabe:

<p class="color"></p>
p.color{
  color: blue;
}

.color{
  color: red;
}

Lösung: Blau!

 

Warum? Ganz einfach:

.color hat 10 Punkte.

p.color hat aber 11  Punkte (p = 1 + .color = 10) und ist somit höher in der Rangfolge.

 

Ich empfehle jedem das Ganze ein paar Male zu üben und schon habt ihr es verinnerlicht und werdet euch nun nicht mehr fragen, warum das CSS manchmal so widerspenstig ist ;)