CSS Selektoren

0 | 30741 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Selektoren" mit Ihrem Wissen!

Selektoren dienen dazu, bestimmt Elemente in einem HTML/XML-Dokument auszuwählen. Auf diese können dann bestimmte Eigenschaften angewendet werden.

Anzeige Hier werben

Einfache Selektoren

Selektor
Auswahl
Beispiel
Kompatibilität
*
jedes Element
<p/>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor *
element
Element mit dem Namen element
<element/>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor elementname
.klasse
Element mit der Klasse klasse
<p class="klasse">
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor .
IE6 hat Probleme mit mehreren
Klassenselektoren auf ein Element
(z.B..klasse1.klasse2)
#elementid Element mit der ID elementid <p id="elementid">
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor #
namespace|element



Kombinatoren

Kombinator
Auswahl
Beispiel
Kompatibilität
A B
Element B, wenn es innerhalb von A vorkommt.
<A><x><B/></x></A>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor Kindelement
A > B
Element B, wenn es direkt innerhalb von A vorkommt. <A><B/></A>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor >
A + B
Element B, wenn es direkt nach A vorkommt (im gleichen Elternelement) <A/><B/>
Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor +
Safari, FF2 und IE7 aktualisieren nicht
wenn das Dokument per Javascript
verändert wurde
A ~ B
Element B, wenn davor A vorkommt (im gleichen Elternelement) <A/><x/><B/>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor ~

Attributselektoren

Es können in CSS auch Elemente nach ihren Attributen ausgewählt werden (<element attributname="attributewert"/>). Das geschieht durch Attributselektoren, die in Eckigen Klammern geschrieben werden.

Attributselektor
Auswahl
Beispiel
Kompatibilität
[attr] Element bei dem das Attribute attr gesetzt ist.
<el attr=""/>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr]
[attr=wert] Attribut attr hat den Wert wert
<el attr="wert"/>
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr=]
[attr^=anf] Attribut beginnt mit anf <el attr="anfang"/>
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr^=]
[attr$=ende] Attribut endet auf ende <el attr="hier ist das ende"/>
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr$=]
[attr*="teil"] Attribut enthält teil
<el attr="viel text mit teil irgendwo" />
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr*=]
[attr~="teil"] Attribut ist eine durch Leerzeichen getrennte Aufzählung, in der ein Wert teil ist.
<el attr="foo teil bar" />
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr~=]
[attr|="en"] Attribut ist eine durch Stiche getrennte Aufzählung, in der ein Wert teil ist.
<el attr="en-US" />
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor [attr|=]
[namespace|attr]



Pseudoelementselektoren

Selektor
Erklärung
Beispiel
Kompatibilität
:hover
Mauszeiger liegt über dem Element
a:hover{ color: #CCC}
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :hover
IE6 kann :hover nur auf <a>-Elemente
:link
ein unbesuchter Link
a:link{ color: #CCC}
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS-Selektor :link

:visited
ein Link der schon einmal besucht wurde
(siehe Hinweisbox unten)
a:visited{ color: #CCC}
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS-Selektor :visited

:active
Aussehen eines aktiven Links während des Klicks
a:active{ color: #CCC}
Firefox3.6Unterstützt4+Unterstützt
IE7Fehlerhaft8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :active

:empty
leeres Element div:empty{width:200px; border-top:1px dashed gray}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :empty

:root
Wurzelelement einer Seite :root{background: #dedede}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :root

:not()
Negation a:not(:visited){}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :not()

:target
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Fast
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :target

:lang()
Firefox3.6Unterstützt4+Unbekannt
IE7Nein8Nein9Unbekannt
Opera11Unterstützt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unterstützt
CSS Selektor :lang()

::selection
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor ::selection

::first-line
Erste Textzeile eines Absatzes
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor ::first-line

::first-letter
erstes Schriftzeichen eines Absatzes
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor ::first-letter

:before
Text der vor dem Element ausgegeben wird

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
:before

:after
Text der nach dem Element ausgegeben wird
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
:after

:slot()
Spricht eine speziellen CSS Template an
body::slot(c) { background: #ccc }
Firefox3.6Unbekannt4+Unbekannt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unbekannt5Unbekannt

Die Pseudoselektoren :befor und :after werden hier nochmals separat erklärt

Das Pseudoelement :visited ist aus Sicherheitsgründen in neuen Browsern (Safari 5, Firefox 3.7, etc) nur noch eingeschränkt nutzbar. So werden alle CSS Definitionen außer: color, background-color, border-color und outline-color ignoriert!!!!

Selektoren innerhalb eines Elternelementes

Mit CSS können auch die ersten, letzten und z.B. jedes dritte Element Ausgewählt werden.

Selektor
Erklärung
Beispiel
Kompatibilität
:first-child
Element ist das Erste seines Elternelementes
<div><a/><b/></div>
Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :first-child

:last-child
Element ist das Letze seines Elternelementes <div><a/><b/></div>
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS-Selektor :last-child

:first-of-type Erstes Element desselben Typs
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS-Selektor :first-of-type

:last-of-type Letztes Element desselben Typs.
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS-Selektor :last-of-type

:only-child einzelnes Element, das kein gleiches besitzt
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :only-child
:only-of-type einzelnes Element, das kein gleichrangiges Element des gleichen Typs besitzt
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :only-of-type
:nth-child(n) Element ist das n. Kindelement.
Als n sind auch odd und even möglich
p:nth-child(2n+1){}

p:nth-child(odd){}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Fehlerhaft12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :nth-child(n)
:nth-last-child(n) Element ist das letzte n. Kindelement. p:nth-last-child(2n+1){}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Fehlerhaft12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :nth-last-child(n)
:nth-of-type(n)
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Fehlerhaft12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :nth-of-type(n)
:nth-last-of-type(n)
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :nth-last-of-type

Selektoren für Formularelemente

WebForms 2.0 CSS Selektoren

Selektor
Erklärung
Beispiel
Kompatibilität
:enabled Zustand des Elementes ist freigegeben
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :enabled

:disabled Zustand des Elementes ist nicht freigegeben
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :disabled

:checked
Zustand des Elementes ist ausgewählt
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Nein9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :checked

:active
ein aktiver Link
Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Fast9Fast
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :active

:focus
Element mit aktuellem Fokus input:focus{border: 1px solid red}
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS Selektor :focus

:default
Firefox3.6Unbekannt4+Unbekannt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unterstützt5Unterstützt
CSS Selektor :default

:valid
:invalid
:indeterminate
Zustand des Elementes ist unbestimmt
:in-range
:out-of-range
:required
:optional
:read-only
:read-write

Selektoren Kombinieren

Selektoren können einfach kombiniert werden indem sie hintereinander geschrieben werden (ohne Leerzeichen).

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
el.klassenname[attr1][attr2=wert2] kindelement {
    /*
    Dieser Selektor wirkt auf:

    Elemente mit Namen "kindelement" 
    welche Kindelemente sind von:
        Einem Element mit Namen "el", welches
            die Klasse "klassenname",
            das Attribut "attr1" und
            das Attribut "attr2" mit Wert "wert2"
        besitzt. 
    */
}

Klassen und IDs

Der Aufruf von Klassifizierungen (Klassen) und Identifizierungen (IDs) geschieht in (X)HTML mit den Attributen class bzw. id.

IDs sind nur einmal pro Dokument anwendbar, für Klassen gibt es jedoch die Möglichkeit mehrere Klassen pro Element anzugeben. Dies kann zum Beispiel nützlich sein, wenn verschiedene DIVs die gleiche Klasse haben aber eines derer aus dem Rahmen fällt.

 
HTML
1
<div class="klasse1 klasse2 klasse3"></div>

Diese Art des Aufrufs von CSS-Klassen ist in allen heute relevanten Browsern implementiert, auch im Internet Explorer 6.

Weiterführend

  • CSS Selektor Tests: Hier kann man testen welche Selektoren vom eigenen Browser unterstützt werden.

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 8 Personen an der Seite "CSS Selektoren" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Selektoren" hier bearbeiten.