Verlauf
Alle Kapitel anzeigen
voriges Kapitel
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.
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.
