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“>…

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.

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
35 Bewertungen
73 %
1
5
3.65
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.