CSS - Selektortypen, Vererbung, Kaskadierung

1. einfache Elementselektoren oder Typselektoren

Die einfachste Methode, Stile einem HTML-Dokument zuzuweisen, besteht in der Verwendung von bestimmten HTML-Befehlen, den so genannten Typselektoren, z.B. p, h1, ul, li, form usw.
Alle diese Tags beschreiben Objekte, die in irgendeiner Form einen bestimmten Zweck haben, ein form z.B. beschreibt ein Formular, ein p einen Paragraph etc.; HTML sieht noch zwei weitere allgemeine Selektoren vor, nämlich das <div> ("Division" ein Blockelement) und das <span> (ein Inline-Element). Diese beiden Objekte sind dazu da, um Elemente auf einer Seite zu strukturieren bzw. andere untergeordnete Elemente zusammenzufassen und haben keine unwillkürliche Auswirkung auf das optische Erscheinungsbild einer Seite im Browser (abgesehen von Standard-Abstände) - sie werden erst mit Hilfe von CSS wirksam. Divs bilden in der Regel die Grundlage für ein tabellenloses reines CSS-Layout.

Ein Typselektor wird einfach mit seinem Objektnamen (HTML-Entsprechung, kleingeschrieben) angesprochen:

h1 { color: rgb(20,20,20); background-color: rgb(255, 0, 0); }

Bsp.: Formatierung mit span und div.

2. ID-Selektoren

ID-Selektoren beginnen mit einer Raute ("#") und sprechen immer dasjenige Element an, das im Attribut id denselben Attributwert wie der Selektor hat. Dabei ist es egal, welchen Objekttyps das Objekt ist - nur die Id zählt. Ids müssen laut Spezifikation innerhalb eines HTML-Dokuments einzigartig sein.

#meinIdWert { border: 1px solid rgb(255, 0, 0); }

[...]
     <h1>Seitentitel</h1>
     <p id="meinIdWert">
        Im Beispiel hier wird das Objekt mit der id &quot;meinIdWert&quot; (und NUR dieses eine Objekt)
        mit einem 1Pixel breiten roten Rand versehen.
     </p>
[...]

Im Beispiel hier wird das Objekt mit der id "meinIdWert", hier ein Paragraph mit einem 1Pixel breiten roten Rand versehen. Ids dürfen nicht mit einer Zahl beginnen und dürfen keine Leer- und Sonderzeichen enthalten.

 3. Klassenselektoren

Klassenselektoren sind (sowie ID-Selektoren) benutzerdefinierte Elemente, d.h. die Bezeichnungen sind frei wählbar und können vom Benutzer angelegt werden. Klassendefinitionen beginnen immer mit einem (.) Punkt und werden dazu verwendet, um Objekte beliebigen Typs (auch gemischt) mit denselben CSS-Attributen zu versehen.

.boldOrange{ color: orange; font-weight: bold; }

Ale HTML-Objekte, die im Attribut "class" nun den Attributswert "boldOrange" haben, werden mit diesem Selektor beschrieben: Orange als Schriftfarbe und fette Textauszeichnung. Im folgenden Beispiel trifft dies auf die Übeschrift und den zweiten Listenpunkt zu:

[...]
     <h1 class="boldOrange">Seitentitel</h1>
     <p>
        Dieser Absatz sieht ganz normal aus.
     </p>
     <ul>
          <li>Dies ist der erste Listenpunkt in einer nicht nummerierten Liste</li>
          <li class="boldOrange">Dies ist der zweite Listenpunkt in einer nicht nummerierten Liste</li>
     </ul>
[...]

4. Selektoren für Nachfahren oder kombinierte Selektoren

Durch die Kombination von Selektoren werden Formatierungseigenschaften eines Elementes nur dann angewandt, wenn es sich innerhalb eines anderen Elements befindet.

h1 a {color: red;}

 Im obigen Beispiel werden alle Hyperlinks, die sich innerhalb einer Überschrift erster Ordnug befinden in roter Farbe. Alle Links, die sich nicht in einer Überschrift befinden, werden weiterhin anders (normalerweise blau) dargestellt. Dabei spielt es keine Rolle, ob sich "zwischen" dem <h1>-Element und dem <a> noch andere Elemente befinden, d.h. wären auch die Links betroffen, die sich in einem <span> unterhalb einer <h1> befinden ("verschachtelt"). Es gibt auch einen Selektor, der nur Elemente anspricht, wenn sie Sich unmitelbar unter einem bestimmten anderen befinden, dazu weiter unten mehr.

Bsp.: Selektoren für Nachfahren

Das Kombinieren von Typen-, Objekt- und Klassenselektoren ist natürlich möglich:

#container li .externallinks  {color: red;}

5. Pseudoklassen

Pseudoklassen kommen dann zur Anwendung, wenn man ein Objekt nicht aufgrund seines Typs oder seiner Position innerhalb einer HTML-Seite mit CSS-Eigenschaften versehen möchte, sondern aufgrund seines Zustandes. Dazu gibt es, vor allem für Links und Formularelemente eigens definierte Pseudoklassen. Die verfügbaren Pseudoklassen für <a>-Elemente sind :link und :visited.

a:hover { background-color: green; }

Die dynamischen Pseudoklassen :hover, :active und :focus können theoretisch auf jedes beliebige Element gelegt werden, allerdings unterstützen einige Browser dies nicht; Anwendung für z.B. :focus findet man bei Formularelementen: Wenn der Fokus/Cursor in ein z.B. Eingabefeld gesetzt wird, kan man durch Anwenden einer anderen Hintergrundfarbe dieses Feld hervorheben.

a:visited { background-color: rgb(40,40,40); }
input:focus { border: 2px solid orange; }
tr:hover { background-color: #66CCFF; }

Im Beispiel werden alle besuchten Links mit einer grauen Hintergrundfarbe hinterlegt; alle Eingabeelemente, die den Fokus haben bekommen einen orangenen Rahmen und alle Tabellenreihen, über die der Mauscursor gestellt wird, werden mit hellblauer Hintergrundfarbe dargestellt. Achtung: Speziell das Tabellenbeispiel wird nicht in allen Browsern auch dargestellt, z.B. Internet Explorer erst ab Version 7.
Es gibt auch noch die Pseudoklassen :first-child, :first-line, :first-letter sowie :before und :after, die aber wegen noch sehr schlechter Browserunterstützung kaum eingesetzt werden.

Beispiel: Pseudo-Klassen

6. Der Universalselektor

Der Universalselektor ist ein sehr mächtiger aber selten verwendeter Selektor: eine CSS-Zuweisung mit dem Universalselektor betrifft alle (!) Elemente auf einer HTML-Seite. Nachdem man aber in den seltensten Fällen allen Elementen einen z.B. Border zuweisen möchte, und diejenigen Attribute, die alle Elemente betreffen sollen (z.B. Schriftfarbe, -art) meist ohnehin vererbt werden, findet der Universalselektor hauptsächlich in einem Fall Anwendung: dem sog. "Global Whitespace Reset". Dabei werden Aussen- und Innenabstand für alle Elemente auf 0 zurückgesetzt - mit dem Ergebnis, das man damit etwaige Abweichungen in den Standardabständen in verschiedenen Browsern ausgleicht. Natürlich muss man dafür für alle Elemente, die Padding oder Margin haben sollen, diese dann explizit jeweils wieder setzen.

* {
     padding: 0;
     margin: 0;
}

Der Universalselektor ist genauso wie alle anderen Selektoren beliebig mit anderen Selektoren kombinierbar.

7. Erweiterte Selektoren: Kindselektor

Erweiterte Selektoren werden momentan nur von Mozilla Fifefox, Opera,  Safari und Internet Explorer ab Version 7 unterstützt. Nachdem aber ein Großteil der Internet-Nutzer noch mit älteren Browserversionen unterwegs ist, muss der EInsatz dieser Selektoren noch gut überlegt sein.

Der Kindselektor funktioniert ähnlich wie der Nachfahrenselektor nur mit dem Unterschied, dass hier nur diejenigen Elemente betroffen sind, die sich unmittelbar hierarchisch unter einem bestimmten anderen Element befinden. So würde dier Selektor

div > ul { background-color: green; }

 nur diejenigen unsortierten Listen ansprechen, die sich unmittelbar in einem div-Element befinden und nicht z.B. eine Liste ausserhalb des divs, im Body. Ebenfalls würden keine Listen angesprochen, wenn sich innerhalb eines div-Elements ein form-Element befindet und die Liste erst wiederum in diesem form beinhaltet ist.

8. Erweiterte Selektoren: Nachfolgendes Geschwisterelement ("Adjacent Sibling")

Dieser Selektor spricht dasjenige Element an, das ein unmittelbares nachfolgendes Element auf derselben Hierarchieebene des vorhergehenden Elementes ist: Im Beispiel wird genau der erste Absatz nach einer Überschrift angesprochen, alle darauffolgenden Übeschriften werden ausgelassen: 

[...]
     <h1>Seitentitel</h1>
     <p>
       Dies ist der erste Absatz.
     </p>
     <p>
       Dies ist der zweite Absatz.
     </p>    
     <p>
       Dies ist der dritte Absatz.
     </p>
[...]

h1 + p { border: 1px solid #FF6600; }

 Beispiel: Adjcent Sibling Selector

9. Erweiterte Selektoren: Attributselektoren

In CSS Level 3 sind auch Selektoren vorgesehen, die ein Objekt abhängig von dessen Attributen betreffen können; dabei kann unterschieden werden, ob ein Attribut überhaupt gesetzt ist oder auch wie dessen Wert ist. Diese Art der Selektoren wird von modernen Browsern grossteils untersützt, der Einsatz ist aber aufgrund der oben schon erwähnten Verbreitung älterer Browser (noch) nicht zu empfehlen; meist wird mit Hilfe von Javascript ein Workaround gebastelt, der dann auch in älteren Browserversionen denselben Effekt erzielt.

Das Vorhandensein eines Attributes kann mit Attributselektoren in der folgenden Form erfolgen (Im Beispiel werden alle Links beschrieben, die das title-Attribut gesetzt haben):

a[title] { border: 1px solid green; }

Das Abprüfen eines Attributes auf einen bestimmten Wert sieht folgendermaßen aus: Möchte man z.B. alle Links mit CSS versehen, die mit http:// beginnen, sähe das folgendermaßen aus:

a[href^="http:"] {
    background: url(images/externalLink.gif) no-repeat right top;
    padding-right: 10px;
}

Damit sähe der Benutzer sofort neben jedem absolut gesetzten Hyperlink, dass dieser auf einen externen Webauftritt verweist (die Links innerhalb der eigenen Webseite sind zumeist relativ gesetzt) - wiederum gilt: in IE <7 funktioniert dies NICHT.

Beispiel: Externe Links mit Attributselektoren kennzeichnen

10. Kombinieren von Selektoren

Das Kombinieren von Selektoren ist beliebig möglich, allgemein gilt: Wenn zwischen Objektselektor und Klasse bzw. Id kein Leerzeichen steht, so werden diejenigen Objekte angesprochen, die dem Objektselektor entsprechen UND das jeweilige Id- oder Klassenattribut besitzen. Wenn jedoch ein Keerzeichen dazwischensteht, so wird nach einem Element gesucht, das das jeweilige Klassen- bzw. Id-Attribut aufweist und sich hierarchisch  UNTERHALB des anderen Objektes befindet. Im Folgenden jeweils ein Beispiel:

div .naviList a {
    background-color: rgb(20,20,20);
}

[...]
     <div>
       <ul class="naviList">
          <li>
             <a href="page1.html">Link zur Seite 1</a>
             <a href="page2.html">Link zur Seite 2</a>
             <a href="page3.html">Link zur Seite 3</a>
          </li>
       </ul>
    </div>
[...]

Der oben beschriebene Selektor betrifft alle Links, die sich innerhalb eines Elementes mit dem Klasseatribut "naviList" und wiederum innerhalb eins divs bedinden.

div.naviList a {
    background-color: rgb(20,20,20);
}

[...]
    <div class="naviList>
       <ul>
          <li>
             <a href="page1.html">Link zur Seite 1</a>
             <a href="page2.html">Link zur Seite 2</a>
             <a href="page3.html">Link zur Seite 3</a>
          </li>
       </ul>
    </div>
[...]

Dieser Selektor wuerde die Links nur betreffen, wenn sie sich innerhalb eines divs befinden, das gleichzeitig auch das Klassenatribut "naviList" gesetzt hat.

Jedes HTML-Dokument ist hierarchisch (in einer Baumstruktur) aufgebaut, was bedeutet, dass jedes Element (jeder TAG) einen Vor- bzw. Nachfahren besitzt - <body> ist ein ein Nachfahre von <html>, <table> ein Nachfahre von <body> und so weiter. Vor- und Nachfahren werden auch als Eltern- und Kind-Elemente bezeichnet. Der Baum, den man aus dieser Struktur von HTML-Tags generieren kann, nennt man auch den DOM-Baum.

Vererbung (oder englisch: "Inheritance") bezeichnet das Prinzip von CSS, dass Stil-Eigenschaften von Elementen auf untergeordnete Elemente übertragen (vererbt) werden. Dadurch genügt es z.B. Schriftart und -farbe auf das Body-Element zu setzen und alle anderen untergeordneten Elemente bekommen diesselbe Schriftart und -farbe vererbt.

Nicht alle Eigenschaften werden vererbt: Hintergrundfarbe und -grafiken, Abstände, Rahmen, Abmessungen,... sind Eigenschaften, die explizit für betreffende Elemente gesetzt werden müssen. Man kann allerdings statt dem Setzen eines Attributes auch "erzwingen", dass eine Eigenschaft "er-erbt" werden soll: Das Schlüsselwort "inherit" weist ein Element an, bei seinem "Elternelement" nachzusehen, welche Wert dort gesetzt ist und diesen selber auch zu verwenden.  Vererbung ist ein wesentliches Mittel, um schlanke Stildefinitionen zu erstellen und nicht diesselben Attribute x-mal redundant zu vergeben.

Stellen wir uns folgendes einfaches Beispiel vor:

[...]
   <h1>... </h1>
   <p> ...</p>
   <ul>
     <li>...</li>
     <li>...</li>
     <li>...</li>   
   </ul>
[...]

Dieser einfache HTML-Code würde in Baumform (unter Nichtbeachtung des HTML-head und damit der Meta-Tags) in etwa wie folgt aussehen:

Sobald man jetzt für den body folgende CSS-Anweisung vornimmt, wird diese Eigenschaft (nämlich die Schriftfarbe) auf alle untergeordneten Knoten vererbt:

body { color: #990000; }

Zur Veranschaulichung als Grafik sieht man alle Knoten, die diese Eigenschaft ererbt haben nun in rot eingefärbt:

Sobald man explizit für ein Objekt die ererbte Eigenschaft anders setzt, gilt nicht mehr der ererbte Wert, sondern die direkte Zuteiung:

Und so sieht das im Browser aus

Bei Verschachtelung von Layoutcontainern können durch die Wertangabe inherit Eigenschaften an Kind-Elementen, wie z.B. border, padding, usw. weitergegeben werden.

body {
   font-size: 14px;
   color: #000000;
   font-family:Arial, Helvetica, sans-serif;
}
#container1 {
   background-color:#CCCCCC;
   width: 350px;
   padding: 5px;
   border: solid 1px #666666;
}
#container2 {
   border:inherit;
   padding: inherit;
   background-color:#ffffff;
}

Bewirkt folgende Anzeige

Allgemeines zur Kaskadierung ("Cascade")

Nachdem man mehrere Stylesheet-Dateien in eine HTML-Datei einbinden kann und selbst innerhalb eines Stylesheets mehrere unterschiedliche Sektoren Eigenschaften derselben Objekte beschreiben können muss es eine Möglichkeit geben, diese Überlappung zu klären und herausfinden zu können, welche der Beschreibungen dann im Endeffekt gültig ist.

Die Grobe Reihenfolge ergibt sich aus dem Ursprung der CSS-Anweisungen:

1. Am geringsten zählt das "Browser Stylesheet". Dieses Stylesheet legt fest, wie Objekte aussehen, wenn keine weiteren Stylesheets eingebunden werden (z.B. h1: fett und größer als normaler Text usw.). Sobald wir also ein Stylesheet an eine HTML-Datei anhängen, überschreiben wir Teile des Browser Stylesheets.
2. Als nächstes in der Rangordnung kommt das "User Stylesheet". Dieses Stylesheet liegt auf dem Endgerät des Benutzers und muss in der Konfiguration des Webbrowsers angegeben werden. Diese Art des Stylesheets kommt eher selten vor.
3. Stärker zählt sodann das "Author Stylesheet". Dieses Stylesheet ist das in eine HTML-Datei eingebundene CSS-Stylesheet so wie wir es aus den Beispielen bisher kennen; Die css-Dateien werden auf dem Webbrowser abgelegt und bei Zugriff auf die HTML-Datei nachgeladen und interpretiert.
   Bisher überschreibt dieses "Author Stylesheet" alle eventuell in (1) oder (2) festgelegten CSS-Beschreibungen.
4. Stärker als normale Angaben im "Author Stylesheet" zählen CSS-Deklarationen, die mit dem Keyword !important abgeschlossen werden.
5. Am stärksten von allen Stylesheets zählen "User Stylesheets", die mit !important abgeschlossen werden - somit kann jeder Endbenutzer durch sein eigenes "User Stylesheet" in Verbindung mit !important festlegen, dass z.B. jeglicher Text doppelt so gross dargestellt werden soll; keine Bilder angezeigt werden sollen usw.

Gewichtung / Specificity

Ist der Ursprung der Stylesheets festgestellt und die Definitionen dahingehend geordnet, wird die Gewichtung ("Specificity") der einzelnen berechnet. Spezifischere Anweisungen heben allgemeinere auf bzw. überschreiben diese. Das Berechnen der Gewichtung funktioniert wie folgt:

Man denkt sich am besten eine Tabelle mit 4 Spalten. Für jede Selektorart wird in der passenden Spalte ein Zählwert eingeschrieben, die 4 Spalten von links nach rechts gelesen ergeben dann die Gewichtung; Höher gewichtete Definitionen wirken stärker als leichter gewichtete. Die erste Spalte ist - sofern man keine inline Styles verwendet, immer 0. Das erklaert auch, warum Inline Styles immer stärker "wirken" als Styles in einem externen Stylesheet.

Wenn zwei CSS-Definitionen exakt diesselbe Gewichtung haben, zählt die Reihenfolge - die zuletzt aufscheinende Definition "gewinnt" und überschreibt die Definition gleichen Gewichts, die ev. vorher einmal beschrieben wurde.

Ein einfaches Beispiel für die Kaskadierungsreihenfolge:

<style type="text/css">
     body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 1em;
     color: #000000;
}
p {
     font-size: 80%;
     color: #333333;
}
.spezial {
     font-size: 100%;
     font-weight: bold;
     color: #000066;
}
strong {
     font-weight: bold;<b
     color: #FF0000;
}
</style>

Bewirkt folgende Anzeige