CSS Selektoren

0 | 4 Kommentare | 9306 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/>`	Firefox3.6Unterstützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS Selektor *
element	Element mit dem Namen element	`<element/>`	Firefox3.6Unterstützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS Selektor elementname
.klasse	Element mit der Klasse klasse	`<p class="klasse">`	Firefox3.6Unterstützt4Unterstützt IE6Fast7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% 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ützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% 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ützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS Selektor Kindelement
A > B	Element B, wenn es direkt innerhalb von A vorkommt.	`<A><B/></A>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor >
A + B	Element B, wenn es direkt nach A vorkommt (im gleichen Elternelement)	`<A/><B/>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Fast8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% 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ützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% 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ützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor [attr]
[attr=wert]	Attribut attr hat den Wert wert	`<el attr="wert"/>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor [attr=]
[attr^=anf]	Attribut beginnt mit anf	`<el attr="anfang"/>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% CSS Selektor [attr^=]
[attr$=ende]	Attribut endet auf ende	`<el attr="hier ist das ende"/>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% CSS Selektor [attr$=]
[attr*="teil"]	Attribut enthält teil	`<el attr="viel text mit teil irgendwo" />`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% 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ützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% 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ützt4Unterstützt IE6Nein7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor [attr\|=]
[namespace\|attr]

Pseudoelementselektoren

Selektor	Erklärung	Beispiel	Kompatibilität
:hover	Mauszeiger liegt über dem Element	`a:hover{ color: #CCC}`	Firefox3.6Unterstützt4Unterstützt IE6Fehlerhaft7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor :hover IE6 kann `:hover` nur auf `<a>`-Elemente
:link	ein unbesuchter Link	`a:link{ color: #CCC}`	Firefox3.6Unterstützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS-Selektor :link
:visited	ein Link der schon einmal besucht wurde (siehe Hinweisbox unten)	`a:visited{ color: #CCC}`	Firefox3.6Unterstützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS-Selektor :visited
:active	Aussehen eines aktiven Links während des Klicks	`a:active{ color: #CCC}`	Firefox3.6Unterstützt4Unterstützt IE6Fehlerhaft7Fehlerhaft8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% CSS Selektor :active
:empty	leeres Element	`div:empty{width:200px; border-top:1px dashed gray}`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :empty
:root	Wurzelelement einer Seite	`:root{background: #dedede}`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :root
:not()	Negation	`a:not(:visited){}`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :not()
:target			Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :target
:lang()			Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :lang()
::selection			Firefox3.6Unbekannt4Unbekannt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 3% CSS Selektor ::selection
::first-line	Erste Textzeile eines Absatzes		Firefox3.6Unterstützt4Unbekannt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unbekannt Safari4Unterstützt5Unbekannt 63% CSS Selektor ::first-line
::first-letter	erstes Schriftzeichen eines Absatzes		Firefox3.6Unterstützt4Unterstützt IE6Unterstützt7Unterstützt8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 67% CSS Selektor ::first-letter
:before	Text der vor dem Element ausgegeben wird		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% :before
:after	Text der nach dem Element ausgegeben wird		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 61% :after
:slot()	Spricht eine speziellen CSS Template an	`body::slot(c) { background: #ccc }`	Firefox3.6Unbekannt4Unbekannt IE6Unbekannt7Unbekannt8Unbekannt9Unbekannt Opera10Unbekannt11Unbekannt Safari4Unbekannt5Unbekannt 0% Titel

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ützt4Unterstützt IE6Nein7Fast8Unterstützt9Unterstützt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 65% CSS Selektor :first-child
:last-child	Element ist das Letze seines Elternelementes	`<div><a/><b/></div>`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS-Selektor :last-child
:first-of-type	Erstes Element desselben Typs		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS-Selektor :first-of-type
:last-of-type	Letztes Element desselben Typs.		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS-Selektor :last-of-type
:only-child	einzelnes Element, das kein gleiches besitzt		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :only-child
:only-of-type	einzelnes Element, das kein gleichrangiges Element des gleichen Typs besitzt		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% 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ützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :nth-child(n)
:nth-last-child(n)	Element ist das letzte n. Kindelement.	`p:nth-last-child(2n+1){}`	Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :nth-last-child(n)
:nth-of-type(n)			Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :nth-of-type(n)
:nth-last-of-type(n)			Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% 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ützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :enabled
:disabled	Zustand des Elementes ist nicht freigegeben		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :disabled
:checked	Zustand des Elementes ist ausgewählt		Firefox3.6Unterstützt4Unterstützt IE6Nein7Nein8Nein9Unbekannt Opera10Unterstützt11Unterstützt Safari4Unterstützt5Unterstützt 11% CSS Selektor :checked
:active	ein aktiver Link		Firefox3.6Unbekannt4Unbekannt IE6Unbekannt7Unbekannt8Unbekannt9Unbekannt Opera10Unbekannt11Unbekannt Safari4Unterstützt5Unterstützt 3% CSS Selektor :active
:focus	Element mit aktuellem Fokus	`input:focus{border: 1px solid red}`	Firefox3.6Unbekannt4Unbekannt IE6Unbekannt7Unbekannt8Unbekannt9Unbekannt Opera10Unbekannt11Unbekannt Safari4Unterstützt5Unterstützt 3% CSS Selektor :focus
:default			Firefox3.6Unbekannt4Unbekannt IE6Unbekannt7Unbekannt8Unbekannt9Unbekannt Opera10Unbekannt11Unbekannt Safari4Unterstützt5Unterstützt 3% 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