CSS Selektoren

0 | 4 Kommentare | 3875 Aufrufe

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

WebForms 2.0 CSS Selektoren
besser erklären
Kompatibilitäten

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

Inhaltsverzeichnis

Einfache Selektoren
Kombinatoren
Attributselektoren
Pseudoelementselektoren
Selektoren innerhalb eines Elternelementes
Selektoren für Formularelemente
Selektoren Kombinieren
Klassen und IDs
Weiterführend

Anzeige Hier werben

Einfache Selektoren

Selektor	Auswahl	Beispiel	Kompatibilität
*	jedes Element	`<p/>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor *
element	Element mit dem Namen element	`<element/>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor elementname
.klasse	Element mit der Klasse klasse	`<p class="klasse">`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Fast7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor . IE6 hat Probleme mit mehreren Klassenselektoren auf ein Element (z.B.`.klasse1.klasse2)`
#elementid	Element mit der ID elementid	`<p id="elementid">`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% 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>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor Kindelement
A > B	Element B, wenn es direkt innerhalb von A vorkommt.	`<A><B/></A>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor >
A + B	Element B, wenn es direkt nach A vorkommt (im gleichen Elternelement)	`<A/><B/>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Fast8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Fast4Unterstützt 91% 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/>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% 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=""/>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor [attr]
[attr=wert]	Attribut attr hat den Wert wert	`<el attr="wert"/>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor [attr=]
[attr^=anf]	Attribut beginnt mit anf	`<el attr="anfang"/>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% CSS Selektor [attr^=]
[attr$=ende]	Attribut endet auf ende	`<el attr="hier ist das ende"/>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% CSS Selektor [attr$=]
[attr*="teil"]	Attribut enthält teil	`<el attr="viel text mit teil irgendwo" />`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% CSS Selektor [attr*=]
[attr~="teil"]	Attribut ist eine durch Leerzeichen getrennte Aufzählung, in der ein Wert teil ist.	`<el attr="foo teil bar" />`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor [attr~=]
[attr\|="en"]	Attribut ist eine durch Stiche getrennte Aufzählung, in der ein Wert teil ist.	`<el attr="en-US" />`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor [attr\|=]
[namespace\|attr]

Pseudoelementselektoren

Selektor	Erklärung	Beispiel	Kompatibilität
:hover	Mauszeiger liegt über dem Element	`a:hover{ color: #CCC}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Fehlerhaft7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor :hover IE6 kann `:hover` nur auf `<a>`-Elemente
:link	ein unbesuchter Link	`a:link{ color: #CCC}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS-Selektor :link
:visited	ein Link der schon einmal besucht wurde	`a:visited{ color: #CCC}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS-Selektor :visited
:active	Aussehen eines aktiven Links während des Klicks	`a:active{ color: #CCC}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Fehlerhaft7Fehlerhaft8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% CSS Selektor :active
:empty	leeres Element	`div:empty{width:200px; border-top:1px dashed gray}`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Fast4Unterstützt 52% CSS Selektor :empty
:root	Wurzelelement einer Seite	`:root{background: #dedede}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :root
:not()	Negation	`a:not(:visited){}`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :not()
:target			Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :target
:lang()			Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :lang()
::selection			Firefox2Fast3Fast3.5Fast3.6Unbekannt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 34% CSS Selektor ::selection
::first-line	Erste Textzeile eines Absatzes		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor ::first-line
::first-letter	erstes Schriftzeichen eines Absatzes		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Unterstützt7Unterstützt8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 99% CSS Selektor ::first-letter
:before	Text der vor dem Element ausgegeben wird		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% :before
:after	Text der nach dem Element ausgegeben wird		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 79% :after

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

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>`	Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Fast8Unterstützt Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 91% CSS Selektor :first-child
:last-child	Element ist das Letze seines Elternelementes	`<div><a/><b/></div>`	Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Nein4Unterstützt 52% CSS-Selektor :last-child
:first-of-type	Erstes Element desselben Typs		Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Nein4Unterstützt 45% CSS-Selektor :first-of-type
:last-of-type	Letztes Element desselben Typs.		Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Nein4Unterstützt 45% CSS-Selektor :last-of-type
:only-child	einzelnes Element, das kein gleiches besitzt		Firefox2Fast3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Nein4Unterstützt 52% CSS Selektor :only-child
:only-of-type	einzelnes Element, das kein gleichrangiges Element des gleichen Typs besitzt		Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Fast10Unterstützt Safari3Nein4Unterstützt 45% 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){}`	Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Fast10Unterstützt Safari3Nein4Unterstützt 45% CSS Selektor :nth-child(n)
:nth-last-child(n)	Element ist das letzte n. Kindelement.	`p:nth-last-child(2n+1){}`	Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Fast10Unterstützt Safari3Nein4Unterstützt 45% CSS Selektor :nth-last-child(n)
:nth-of-type(n)			Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Fast10Unterstützt Safari3Nein4Unterstützt 45% CSS Selektor :nth-of-type(n)
:nth-last-of-type(n)			Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Fast10Unterstützt Safari3Nein4Unterstützt 45% 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		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :enabled
:disabled	Zustand des Elementes ist nicht freigegeben		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :disabled
:checked	Zustand des Elementes ist ausgewählt		Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt IE6Nein7Nein8Nein Opera9.5Unterstützt10Unterstützt Safari3Unterstützt4Unterstützt 52% CSS Selektor :checked
:active	ein aktiver Link		Firefox2Unbekannt3Unbekannt3.5Unbekannt3.6Unbekannt IE6Unbekannt7Unbekannt8Unbekannt Opera9.5Unbekannt10Unbekannt Safari3Unbekannt4Unterstützt 4% CSS Selektor :active
:focus	Element mit aktuellem Fokus	`input:focus{border: 1px solid red}`	Firefox2Unbekannt3Unbekannt3.5Unbekannt3.6Unbekannt IE6Unbekannt7Unbekannt8Unbekannt Opera9.5Unbekannt10Unbekannt Safari3Unbekannt4Unterstützt 4% CSS Selektor :focus
:default			Firefox2Nein3Unterstützt3.5Unbekannt3.6Unbekannt IE6Unbekannt7Unbekannt8Unbekannt Opera9.5Unbekannt10Unbekannt Safari3Unbekannt4Unterstützt 10% 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

CSSel.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