Hi, Freunde der Web Entwicklung. Sicherlich jedem mal in seiner Tätigkeit als Web Developer begegnet: Die Spezifität eines CSS Selektors. Warum wird meine Deklaration nicht angewendet obwohl sie z. B. am Ende des Stylesheet steht oder zumindest andere Regeln dieses Elements hinter sich lässt. Die Antwort: Weil die Spezifität eines Selektors über deren Anwendung entscheidet. Im Mozilla Developer Network (MDN) wird das wie immer fachmännisch beschrieben. Hier findet der fragende Entwickler auch schnell Antworten und eine schlüssige Auflistung der Selektoren-Typen:
- Universal selectors
- Type selectors
- Class selectors
- Attributes selectors
- Pseudo-classes
- ID selectors
- Inline style
Das verdeutlicht dann auch schon mal, warum die ein oder andere Deklaration meine hinzugefügte neue Regel überstimmt. Bei einfachen Class- und ID-Selektoren ist die Lösung auch schon schnell gefunden. Doch was ist, wenn Pseudo- und Attributselektoren dazukommen? Um hier auch etwas visueller und deutlicher zu werden, empfehle ich euch das kleine, amüsante Cheat Sheet von http://cssspecificity.com/ Es verdeutlicht die Komplexität der CSS Deklarationen in erfrischender Einfachheit mit Witz. In der Legende wird auch die Kardinalität (Rang, Mächtigkeit) der Selektoren beschrieben:
- x-0-0:
Die Anzahl der ID Selektoren
- 0-x-0:
Die Anzahl an Class, Attribut und Pseudo-Selektoren
- 0-0-x:
Die Anzahl an Type und Pseudo-Elementen
Doch nun lassen wir das Cheat Sheet sprechen. Mal wieder was zum Ausdrucken um es dann ans Whiteboard zu kleben.
http://cssspecificity.com/