Referenz:CSS/Selektoren

Aus SELFHTML-Wiki

Die ausführliche Beschreibung ist hier zu finden: CSS/Selektoren

[Bearbeiten] Einfache Selektoren

Selektoren können durch Kommata getrennt werden:

Selektor1, Selektor2, ... { Deklarationen }

[Bearbeiten] Universalselektor

Mit dem Stern * werden alle Elemente in einem Dokument angesprochen.

* { Deklarationen }

[Bearbeiten] Typ- / Elementselektor

Mit dem Typ- bzw. Elementselektor werden alle Elemente mit dem angegebenen Namen angesprochen.

elementname { Deklarationen }

[Bearbeiten] Klassenselektor

Klassenselektoren sprechen Elemente an, die einer bestimmten Klasse zugehörend sind, z.B. mit dem class-Attribut in HTML.

.klassenname { Deklarationen }

Klassenselektoren können mit anderen Selektoren verbunden werden:

• Mit Elementselektoren: elementname.klassenname
• Mit ID-Selektoren: .klassenname#id bzw. #id.klassenname

.klasse1.klasse2 selektiert Elemente, die der Klasse „klasse1“ und „klasse2“ angehören;
.klasse1, .klasse2 selektiert Elemente, die der Klasse „klasse1“ oder „klasse2“ angehören.

[Bearbeiten] ID-Selektor

Mit dem ID-Selektor kann ein Element angesprochen werden, dem eine ID zugeordnet wurde, z.B. mit dem id-Attribut in HTML.

#id { Deklarationen }

ID-Selektoren können mit anderen Selektoren verbunden werden:

• Mit Elementselektoren: elementname#id
• Mit Klassenselektoren: .klassenname#id bzw. #id.klassenname

[Bearbeiten] Die Attributselektoren

In HTML und einigen XML-Formaten gibt es Attribute, deren Wert vordefiniert ist. Beachten Sie, dass sowohl HTML- als auch XML-Parser diese Attribute und ihre Werte nicht zwingend in den DOM-Elementbaum einarbeiten müssen. Beziehen Sie daher Attributselektoren nur auf Attribute, die Sie im Quelltext notiert haben.

Attributselektoren können mit anderen Selektoren verbunden werden:

• Mit dem Elementselektor: elementname[attributselektor]
• Mit Klassenselektoren: .klassenname[attributselektor]
• Mit dem ID-Selektor: #id[attributselektor]

[Bearbeiten] Attributpräsenz

Ein Element, das ein bestimmtes Attribut besitzt, kann durch den einfachen Attributselektor angesprochen werden.

[attributname] { Deklarationen }

[Bearbeiten] Attributwerte

Attributselektoren erlauben es, Elemente nur dann anzusprechen, wenn das Attribut einen bestimmten Wert oder Wertabschnitt besitzt.

• Attributwert hat genau festgelegten Wert:
  [attributname=attributwert]
• Attributwert enthält Zeichenkette, die durch Leerzeichen von anderen Bestandteilen des Attributwerts getrennt ist:
  [attributname~=attributwert]
  Enthält der im Selektor angegebene Wert ein Leerzeichen, so spricht dieser Selektor kein Element an.
• Attributwert beginnt mit Zeichenkette, die durch einen Bindestrich vom Rest des Attributwerts getrennt sein kann:
  [attributname|=attributwert]

[Bearbeiten] Teilübereinstimmungen

• Attributwert beginnt mit festgelegter Zeichenkette:
  [attributname^=attributwert]
• Attributwert endet mit festgelegter Zeichenkette:
  [attributname$=attributwert]
• Attributwert enthält festgelegte Zeichenkette:
  [attributname*=attributwert]

Beginnt der im Selektor angegebene Wert mit einer Ziffer oder besteht aus anderen Zeichen als Buchstaben, Ziffern, Binde- und Unterstrich, so muss er innerhalb von einfachen oder doppelten Anführungszeichen notiert werden.

[Bearbeiten] Kombinatoren

Kombinatoren sind Zeichen, die zwei Selektoren miteinander verketten. Durch diese Verkettung bildet der erste Teilselektor eine Bedingung und der zweite Teilselektor das Ziel, das angesprochen werden soll, wenn die Bedingung erfüllt wurde. Der Kombinator gibt dabei an, in welchem Verhältnis die Teilselektoren vor und nach ihm zueinander stehen müssen.

Zwischen zwei Selektoren kann nur ein Kombinator stehen, jedoch kann an diese Kette ein weiterer Kombinator zusammen mit einem weiteren Teilselektor angehängt werden.

[Bearbeiten] Kindselektor (Child Selector)

Werden zwei einfache Selektoren durch die schließende spitze Klammer > miteinander verbunden, z.B. E > F, so wird das Element F nur dann angesprochen, wenn es Kindelement eines E-Elements ist.

[Bearbeiten] Nachfahrenselektor (Descendant Selector)

Werden zwei einfache Selektoren durch ein Leerzeichen miteinander verbunden, z.B. E F, so wird das Element F nur dann angesprochen, wenn es Nachfahre eines E-Elements ist.

Das Leerzeichen (bzw. ein anderes Whitespace-Zeichen) zwischen zwei Selektoren dient nur dann als Kombinator, wenn kein anderer Kombinator vorhanden ist.

[Bearbeiten] Nachbarselektor (Adjacent Sibling Selector)

Werden zwei einfache Selektoren durch das Pluszeichen + miteinander verbunden, z.B. E + F, so wird das Element F nur dann angesprochen, wenn es im Elementbaum direkt auf ein E-Element folgt.

[Bearbeiten] Geschwisterselektor (General Sibling Selector)

Werden zwei einfache Selektoren durch die Tilde ~ miteinander verbunden, z.B. E ~ F, so werden alle F-Elemente angesprochen, die im Elementbaum auf ein E-Element folgen - unabhängig davon, ob sich zwischen den Elementen weitere, im Selektor nicht genannte, Elemente befinden.

Ansichten