ZUM-Unterrichten - Logo.png
Viele Inhalte sind umgezogen ins neue ZUM-Unterrichten.

Selektor

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Damit CSS-Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren. Als Selektoren bezeichnet man die Teile einer CSS-Regel, die vor dem Abschnitt aus geschweiften Klammern stehen. Voneinander unabhängige Selektoren, denen dieselben Eigenschaften zugewiesen werden, können mit Kommata getrennt werden.

einfacher Selektor { 
  CSS-Eigenschaft: Wert;
}
erster Selektor, 
zweiter Selektor { 
  CSS-Eigenschaft: Wert;
}

Selektoren

Inhaltsverzeichnis

Universalselektor

Der Universalselektor trifft auf alle Elemente zu und kann daher zumeist einfach weggelassen werden. Die beiden folgenden Regeln sind bedeutungsgleich.

* { 
  margin: 0; 
}
    
{ margin: 0; }


Typselektor

Der Typselektor spricht Elemente anhand des Elementnamens an. Die Regel wird auf alle Elemente des entsprechenden Typs angewandt, egal an welcher Stelle des Dokuments sie notiert sind und welcher Klasse sie angehören oder welchen Bezeichner sie tragen.

p { 
  margin: 0; 
}


Klassen- und ID-Selektor

Das Universalattribut class können Sie für fast alle Elemente vergeben. Sie sprechen es mit CSS über den Klassenselektor an, indem Sie den Klassennamen mit einem führenden Punkt ohne Leerzeichen direkt hinter den einfachen Selektor setzten. Die Regel

p.hinweis { 
  color: red; 
}

spricht alle Elemente vom Typ p an, deren Attribut class den Wert hinweis enthält, beispielsweise folgende:

<p class="hinweis">Bitte füllen Sie alle mit einem Asterisk (*) markierten Felder aus.</p>

<p class="fehler hinweis">Es ist ein Fehler aufgetreten.<p>

Der Selektor <cide>.hinweis</code> spricht alle Elemente der Klasse hinweis an, egal welchen Typs, und ist äquivalent zu *.hinweis.

Der folgende kombinierte Klassenselektor spricht Elemente an, die sowohl zur Klasse fehler als auch zur Klasse hinweis gehören:

.fehler.hinweis { 
  margin: 0; 
}

Das Universalattribut id hat in HTML-Dokumenten eine besondere Bedeutung, weil sein Wert pro Dokument nur ein Mal auftreten darf und Elemente mit diesem Attribut als Zielanker eines Links dienen können. Aus der zweiten Eigenschaft ergibt sich auch die Notation des ID-Selektors in CSS: Es wird eine Raute (#) vorangestellt:

ul#navigation { 
  margin: 0; 
}


Attributselektoren

Selektor Bezeichung Bedeutung
E[foo] Elemente //E// mit Attribut //foo//
E[foo="bar"] Attributselektor Elemente //E// mit Attribut //foo// und Wert //bar//
E[foo~="bar"] Attributselektor Elemente //E// mit Attribut //foo//, dessen durch Leerzeichen getrennte Liste von Werten //bar// enthält //(p[class~="bar"]// entspricht //p.bar//)
E[foo^="bar"] Attributselektor Elemente //E// mit Attribut //foo//, dessen Wert mit //bar// beginnt
E[foo$="bar"] Attributselektor Elemente //E// mit Attribut //foo//, dessen Wert mit //bar// endet
E[foo*="bar"] Attributselektor Elemente //E// mit Attribut //foo//, das die Zeichenkette //bar// enthält

Pseudoklassen

Mit Pseudoklassen können Webautoren Elemente anhand von Informationen auswählen, die entweder außerhalb der Dokumentstruktur liegen (:after, bzw. :before) oder mit anderen Selektoren nicht ausgedrückt werden können. Die Notation beginnt immer mit genau einem Doppelpunkt (:).

a { 
  padding: 3px; 
} 
a:focus { 
  background-color: red; 
  color: black;
} 
a:hover { 
  background-color: blue; 
  color: white; 
} 
a:active { 
  background-color: yellow; 
  color: black; 
}

Die beiden Linkzustände :link und :visited treten ein, wenn der Zielanker eines Hyperlinks unbesucht oder besucht ist.

Siehe auch

Weblinks