CSS !important –
So deklarierst du Befehle als wichtig
Wenn ihr vor dem Problem steht, dass eure CSS-Befehle nicht mehr greifen. Zum Beispiel wenn ihr ID-Elemente mit Klassen überschreiben möchtet, dann versucht es mal hiermit.
Diesmal gibt es keine Scripte zum Einbinden oder generell großen Erklärungsbedarf. Es geht um eine einfache Regel für CSS (Cascading-Style-Sheets): !important. Ihr habt vorgefertigte Web-Software wie eCommerce Shops oder einfach Content-Management- und Blog-Systeme? Darin befindet sich schon ein Template, welches ihr noch etwas tunen wollt?
Dann mal los! Die Hierarchie von CSS:
1. Element-Style
<div style="...">...
2. ID-Selektoren
<div id="beispiel_id">...
3. Klassen
<div class="beispiel_klasse">...
- 26px Schrift
Der Text des folgenden Absatzes (<p>) würde laut Hierachie also nun 26 Pixel groß sein, da das ID-Attribut klaren Vorrang gegenüber dem Class-Attribut hat.
<p id="gross" class="klein">Testtext
</p>
#gross {font-size:26px;}.klein {
font-size:10px;}
Dann versuchen wir es doch einmal mit !important:
#gross {font-size:26px;}.klein {
font-size:10px !important;}
- 10px Schrift
Jetzt haben wir der Klasse "klein" gesagt, dass font-size:10px; important, zu Deutsch "wichtig" ist.
Nach erneutem Blick auf den Absatz, werden wir bemerken, dass die !important-Regel greift. Die Regel wird, soweit meine Erfahrung damit, von jedem Browser berücksichtigt.
Dann mal wieder viel Vergnügen beim umgestalten eurer Layouts.
