Home/Needful-Things/CSS3-Selektoren

Besteht Ihr Browser den Selektor-Test ?

Die kommende CSS3-Spezifikation führt eine Reihe neuer und interessanter Selektoren ein, die wir auf dieser Seite entsprechend ihrer zweckbestimmenden Funktionen, sortieren und erfassen. Sieht man von den Redmonder Produkten einmal ab, so sind bereits heute in allen modernen Browsern, grundlegende Teiltechniken der künftigen CSS3-Syntax implementiert. Machen Sie den Browsertest!

Nach dem Start der CSS3.Info/Test-Suite wird automatisch anhand einer großen Zahl von kleinen Tests ermittelt, ob Ihr Browser mit den kommenden CSS3-Selektoren kompatibel ist. Der Test wird je nach Verbindungsgeschwindigkeit ein bis drei Minuten dauern.

CSS3.Info/Test-Suite



Edit: Letze Änderung [ Montag , der 13.04.2009 ]

Attribut-Selektor [attr="Wert"]

CSS erlaubt Autoren, Regeln anzugeben, die mit im Quelldokument definierten Attributen übereinstimmen. Attributwerte müssen Bezeichner oder Zeichenketten sein. Mehrere Attribut-Selektoren können genutzt werden, um auf mehrere Attributwerte eines Elements zu verweisen, oder auch mehrfach auf dasselbe Attribut.


/* ----- CSS3 Attribut Selektoren: [attr^="Wert"] ----- */
 
 
a[href^="http:"]  Zeichenkette am Anfang - Selektor: [attr^="wert"]
 
 
a[href$=".tiff"]  Zeichenkette am Ende   - Selektor: [attr$="wert"]
 
a[href$=".pdf"]  PDF-Datei
a[href$=".doc"]  Word-Datei
a[href$=".pps"]  PowerPoint-Datei
a[href$=".xls"]  Excel-Datei
a[href$=".swf"]  Flash-Datei
a[href$=".odt"], a[href$=".ods"]   OpenOffice Dateien 
a[href$=".rtf"], a[href$=".rtfd"], a[href$=".txt"]  Textdateien
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".bmp"]  Bilddateien
a[href$=".gif"], a[href$=".tiff"], a[href$=".tif"], a[href$=".svg"]  Bilddateien
a[href$=".mov"], a[href$=".avi"],  a[href$=".mp4"], a[href$=".wmv"]  Videodateien
a[href$=".mp3"], a[href$=".m4a"],  a[href$=".wav"], a[href$=".wma"]  Audiodateien
a[href$=".psd"]  Photoshop-Datei 
a[href$=".zip"], a[href$=".tar"],  a[href$=".rar"]  Komprimierte Archive
a[href$=".vcf"]  vCard-Datei (Adresskarte)
a[href$=".cal"]  Kalenderdatei
 
 
a[href*="foo"]   Zeichenkette in der Mitte - Selektor: [attr*="wert"]
 
 
a[lang|="de"]    Zeichenkette durch Bindestrich getrennt - Selektor: [attr|="wert-wert"]
 
Das Element hat ein Attribut [lang], dessen Wert mit "de" beginnt.
 
 
E[foo~="bar"]    Zeichenkette durch Leerzeichen getrennt - Selektor: [attr~="wert wert"]
 
Element E mit Attribut [foo], dessen durch Leerzeichen getrennte Liste von Werten den
Wert "bar" enthält.



Genereller Geschwister-Kombinator

Die nachfolgende Regel spricht alle p-Elemente an, die Geschwister eines ul-Elements sind und zum selben Eltern-Element gehören. Zwischen den Geschwistern dürfen auch andere Elemente vorkommen.


ul ~ p {
background-color: #777;
color: #063;
}

vorhandene Kombinatoren:  Größer-als-Zeichen > das Plus + und die Tilde ~



Selektor: Pseudoklassen

Pseudoklassen gestatten eine umfangreiche Auswahl an Kriterien, die so dem Quelltext nicht zu entnehmen sind. Sie können damit auf interaktive Aktionen reagieren und helfen dem Webdesigner bei der Umsetzung seines Layouts.


input:checked {
border: 2px solid #555;
}
Radiobuttons mit dem Status checked erhalten einen Rahmen.
 
 
input[type="text"]:disabled {
background: #fafafa;
}
Form-Elemente mit dem Status disabled erhalten eine Hintergrundfarbe.
 
 
input[type="text"]:enabled {
background: #ccc;
}
Form-Elemente mit dem Status enabled erhalten eine andere Hintergrundfarbe.
 
 
h4#api:target {
background: #ccc;
}
Das Sprungziel wird beim Klick auf den Link (Sprungmarke) optisch hervorgehoben.
Sprungmarke auf den Hauptseiten: <a href="fachthemen.html#api">Api-Schnittstelle</a>
Sprungziel zur Seite Fachthemen: <h4 id="api">Application Programming Interface</h4>
 
 
:not()
:not(:first-child) {
border: 1px solid #ccc;
}
Wählt alle Elemente aus, die nicht das erste Kind sind.
 
Mit der Negations-Pseudoklasse :not() können Elemente gewählt werden, auf die ein bestimmter
Selektor nicht zutrifft. Diese Elemente werden innerhalb der Klammern angegeben.



Selektor: Pseudoelemente

Bei Pseudoelementen ab CSS3 muss die Schreibweise mit doppelten Kolon :: genutzt werden. Für ältere Pseudoelemente CSS1, 2 soll aus Gründen der Kompatibilität, die Schreibweise mit einfachen Kolon : anwendbar bleiben.


p::selection {
background-color: #FF5111;
color: #000;
}
Vom Anwender selektierter Text innerhalb eines Absatzes wird schwarz auf rot dargestellt.
 
 
input::value {
Deklaration: ...
}
Inhalt des Input-Feldes konfigurieren, bzw. beeinflussen
 
 
E::repeat-item  E::repeat-index

Child-Elemente, z.B. tr bei Tabellen die nacheinander aufgerufen werden



Selektor: Struktur-Pseudoklassen

Über Struktur-Pseudoklassen können Webautoren Elemente anhand ihrer Position in der Dokumentstruktur ansprechen. Der erste in der unteren Liste eingetragene Selektor :first-child gibt es schon in CSS2, alle anderen Selektoren sind Bestandteil der kommenden CSS3 Syntax.


E:first-child  erstes Kind seines Elternelements
 
E:last-child  letztes Kind seines Elternelements
 
E:first-of-type  erstes Element E, das Kind seines Elternelements ist
 
E:last-of-type  letztes Element E, das Kind seines Elternelements ist
 
E:only-child  Element E, das einziges Kind seines Elternelements ist
 
E:only-of-type  einziges Element E in einer Reihe von Geschwisterelementen
 
E:nth-child(n)  Element E, das von vorn gezählt n-tes Kind seines Elternelements ist
 
E:nth-last-child(n)  Element E, das von hinten gezählt n-tes Kind seines Elternelements ist
 
E:nth-of-type(n)  von vorn gezählt n-tes Element E in einer Reihe von Geschwisterelementen
 
E:nth-last-of-type(n)  von hinten gezählt n-tes Element E in einer Reihe von Geschwistern
 
E:empty  Element E ohne Nachfahren und ohne Inhalt
 
E:root  Wurzelelement E eines Dokuments - im HTML-Dokument äquivalent zum Selektor html

Seitenanfang