CSS - Kaskadierung - Einschränkung
1. Definition
Eigentlich müsste dieser Punkt Nachfolge-Selektor heißen, aber denkt an die Einführung zur Kaskadierung und Martin Luther.
So jetzt wird es etwas kompliziert. Ich versuche es mal einfach auszudrücken. Einschränkung bedeutet, bestimmte Bedingungen zu definieren, bei denen erst dann die entsprechenden StyleSheet-Anweisungen gültig werden, wenn sie in einem bestimmten Zusammenhang benutzt werden. Dabei nutzen wir die Verschachtelung eines HTML-Dokumentes aus.
2. Beispiel
Gehen wir mal von folgender Situation aus: Wir haben eine Menüleiste mit den Hauptnavigationspunkten und dann noch eine mit
den jeweiligen Unterpunkten. Beide sind in <div>-Elemente untergebracht. Der HTML-Code sähe dann vielleicht
so aus.
<div class="mainnav">
<a href="...">Hauptpunkt 1</a>
<a href="...">Hauptpunkt 2</a>
<a href="...">Hauptpunkt 3</a>
.. usw ...
</div>
<div class="subnav">
<a href="...">Unterpunkt 1</a>
<a href="...">Unterpunkt 2</a>
<a href="...">Unterpunkt 3</a>
<a href="...">Unterpunkt 4</a>
.. usw ...
</div>
Hinweis: eigentlich sollte man das als Liste aufbauen, ich mache es hier aber nicht, da es nur um das Prinzip geht. Jetzt kann
man die Links entsprechend ihrer Einbindung an das jeweilige <div>-Element definieren.
.mainnav a
{
color: #fff;
padding: 3px 30px 3px 13px;
border-top: 1px solid #8EA396;
}
.subnav a
{
display:block;
color: #fff;
width: 137px;
border-top: 1px solid #8EA396;
background-color: #1D452C;
padding: 3px 3px 3px 13px;
}
Also werden alle Links im <div>-Element mainnav entsprechend der CSS-Anweisung
.mainnav a formatiert und alle Links im <div>-Element subnav entsprechend
der Anweisung .subnav a. Dieses Prinzip kann man bis zum Erbrechen einsetzen (aber nicht darüber hinaus, euer
Magen wird es euch danken).
3. Noch ein Beispiel
Wir möchten eine verschachtelte Liste innerhalb eines speziellen <div>-Elementes formatieren. Der HTML-Code
sieht so aus:
<div class="innen">
<ul class="liste1">
<li>
Produktgruppe A
<ul>
<li><a href="...">Produkt A 1</a></li>
<li>Produkt A 2</li>
<li><a href="...">Produkt A 3</a></li>
</ul>
</li>
<li>
Produktgruppe B
<ul>
<li><a href="...">Produkt B 1</a></li>
<li>Produkt B 2</li>
</ul>
</li>
</ul>
</div>
Die einzelnen Listenpunkte ließen sich jetzt folgendermaßen ansprechen.
/* Formatierung der Produktgruppen */
.innen .liste1 li { ... }
/* Formatierung der Produkte ohne Links */
.innen .liste1 li li { ... }
/* Formatierung der Produkte mit Links */
.innen .liste1 li li a { ... }
Man muss dabei allerdings noch auf etliche Punkte achten, aber darauf werde ich bei den Tutorials eingehen. Bis hier hin hoffe ich erst mal, ihr habt das grundsätzliche Prinzip verstanden.
4. Weitere Möglichkeiten
Bei umfangreicheren Projekten kann es schon mal vorkommen, dass man irgendwann ein klein wenig den Überblick verliert. Soll heißen, dass man zum Beispiel aus Versehen eine Klasse zweimal definiert, sie unterschiedlichen HTML-Tags zuweist, und auf einmal hüpft alles wie wild durch das Browserfenster.
.kasten
{
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: #fff;
}
/* 350 Zeilen später */
.kasten
{
width: 200px;
float: left;
margin-left: 20px;
}
<!-- Seite xy.htm -->
<div class="kasten">...</div>
<!-- Seite z.htm -->
<p class="kasten">...</p>
Solche Probleme kann man umgehen, indem man Klassen- und ID-Definitionen an bestimmte Tags "bindet". Das heißt, dass die Zuweisung nur dann vorgenommen wird, wenn der Typ des HTML-Elements richtig ist.
div.kasten
{
width: 400px;
height: 200px;
border: 1px solid #000;
background-color: #fff;
}
/* 350 Zeilen später */
p.kasten
{
width: 200px;
float: left;
margin-left: 20px;
}
<!-- Seite xy.htm -->
<div class="kasten">...</div>
<!-- Seite z.htm -->
<p class="kasten">...</p>
Ein Hinweis
Wer mit diesem Prinzip vertraut ist und über ein wenig Erfahrung verfügt, sollte sich auf jeden Fall mal mit den Problemen der Elementkopplung und den Nachfolgeselektoren beschäftigen. Vorher empfehle ich euch aber, das erworbene Grundwissen praktisch zu erproben.
5. Mehrfachklassen
Wenn man damit arbeitet, so gibt es auch hier eine Möglichkeit. Nehmen wir mal an es gibt die beiden folgenden Elemente.
<div class="blubb blubber">...</div>
<div class="bla blubber">...</div>
Jetzt soll aber nur im <div class="blubb blubber"> etwas geändert werden. Dafür gibt es dann folgende Schreibweise.
div.blubb.blubber {
color: #f00;
}
Dabei werden beide Klassenangaben nicht durch ein Leerzeichen getrennt, sondern direkt aneinander geschrieben. Das div
kann man gegebenenfalls weglassen.