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“>…
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;
}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.
