Pfad: Home / CSS-Artikel / Kontextselektoren

Bei größeren Web-Projekten sammeln sich im Laufe der Zeit große Mengen von spezifischen Formatierungen in den diversen Dokumenten an. Das führt häufig dazu, daß der Quellcode der einzelnen Seiten mit Klassen aller Art übersättigt ist und bei Änderungen und Anpassungen das eine oder andere übersehen wird.
Dagegen hilft die Style-Notierung mit sogenannten „Kontextselektoren„, deren Syntax wir in diesem Artikel beleuchten wollen.

Als Beispiel nehmen wir das „klassische” (tabellenlose) Seiten-Gerüst, stark vereinfacht dargestellt:

  <div id="header">
<p>Ganz viel Text</p>
  </div>

  <div id="menue">
<p>Ganz viel Text</p>
  </div>

  <div id="inhalt">
<p>Ganz viel Text</p>
  </div>

  <div id="footer">
<p>Ganz viel Text</p>
  </div>

Jeder DIV-Container soll eine eigene Schriftformatierung haben (der Einfachheit halber beschränken wir uns hier auf die Schriftgröße).
Normalerweise würde man jetzt verschiedene Klassen einrichten, um die Größen zuzuweisen – also zum Beispiel:

p.head {font-size: 95%}
p.menu {font-size: 75%}
p.content {font-size: 80%}
p.foot {font-size: 85%}

Im Quellcode müßte man alle <P> mit der jeweiligen Klasse auszeichnen, also zum Beispiel im Container #inhalt so:

  <div id="inhalt">
<p class="content">Ganz viel Text</p>
<p class="content">Ganz viel Text</p>
<p class="content">Ganz viel Text</p>
  </div>

Das bläst den Code auf, ist viel Tipperei, und irgendwann hat man die ganzen Klassen nicht mehr im Kopf – Änderungen und Anpassungen werden immer schwieriger und fehlerträchtiger.

Hier kommen die Kontextselektoren ins Spiel. Statt eine Klasse zu vergeben, weisen wir (in unserem Beispiel) die Formatierung von <P> im Kontext seines übergeordneten Elementes zu. Der Quelltext bleibt unberührt, also:

  <div id="inhalt">
<p>Ganz viel Text</p>
  </div>

Die dazugehörige Stylesheet-Anweisung sieht so aus:

#inhalt p {font-size: 80%}

„Innerhalb des Elementes mit der '(ID)#inhalt' (und NUR dort) erhalten alle <P> die Schriftgröße 80%.”

Genauso gehen wir bei allen weiteren Elementen vor, die innerhalb von <div id="inhalt"> vorkommen sollen, zum Beispiel:

#inhalt h1 {font-size: 140%}
#inhalt img {border: none}

usw.

Diese Selektoren können auch verschachtelt werden. Nehmen wir an, für Links, die im Kontext von #inhalt auftauchen, haben wir folgendes bestimmt:

#inhalt a {text-decoration: underline}

Nun benötigen wir aber auch Links, die in einer Liste <UL> stehen sollen, jedoch ohne Unterstreichung. Also notieren wir im Stylesheet:

#inhalt ul a {text-decoration: none}

Wenn die Selektoren verschachtelt sind, liest man sie am besten von hinten nach vorne:
„Nicht unterstrichen werden alle Links <A>, die in einer Liste <UL> stehen – aber nur, wenn diese Liste innerhalb des Elementes mit der (ID)#inhalt vorkommt.”

Der HTML-Code dazu sähe schlicht und einfach so aus:

  <div id="inhalt">
<ul>
 <li>
  <a href="foo.htm">Linktext</a>
 </li>
</ul>
  </div>

Oder, erweitert um alle unsere Beispiele:

  <div id="inhalt">
<h1>Überschrift</h1>
<p>Ganz viel Text im ersten Absatz.</p>
<ul>
 <li>
  <a href="foo.htm">Linktext nicht unterstrichen</a>
 </li>
</ul>
<p>Ganz viel Text mit
<a href="foo.htm">unterstrichenem Linktext</a>,
und noch mehr Text.</p>
<img src="foo.jpg" width="50" height="50" alt="bla">
<p>Auch ein Bild ohne *borders* wurde eingefügt.</p>
  </div>

Und die dazugehörigen Styles im Überblick:

#inhalt h1 {font-size: 140%}
#inhalt p, #inhalt li {font-size: 80%}
#inhalt a {text-decoration: underline}
#inhalt ul a {text-decoration: none}
#inhalt img {border: none}

Hinweis: Die Schriftgröße für <LI> wurde gleich bei #inhalt p angefügt (separiert durch Komma).

Mit dieser Form der Notierung bleibt der Quellcode schlank und übersichtlich. Zudem lassen sich die einzelnen Blöcke innerhalb des Stylesheets sehr gut sortieren und man behält den Überblick, welche Formatierung sich auf welche Elemente bezieht.

Viel Spaß beim Aufräumen Ihrer Quellcodes :-))