10. ARTEN VON SELEKTOREN

Zunächst die grundlegendsten Selektoren:

  1. Universalselektor *
  2. Typselektor z.B. h1
  3. Klassenselektor z.B. .anders
  4. ID-Selektor z.B. #navi

Die oben genannten lassen sich unterschiedlich kombinieren:

  1. Gruppenselektoren z.B. h1, h2, h3
  2. Nachfahrenselektor z.B. #navi ul
  3. Selektor für benachbarte Geschwisterelemente

Daneben gibt es noch ein paar Spezialformen, die Pseudoklassen und Pseudoelemente:

  1. Pseudoklassen für Hyperlinks z.B. :active
  2. Pseudoelemente z.B. :first-letter

1. Universalselektoren

Der Universalselektor ist wie ein Joker, er passt auf alle Elemente. Das folgende Beispiel formatiert alle Texte dunkelgrau:

* { color: gray; }

2. Typselektor

Mit dem Typselektor wählen Sie gezielt HMTL-Elemente aus. Mit der folgenden Anweisung forma-tieren Sie beispielsweise alle Absätze < p >
.
p { color: blue; }
Der Nachteil hierbei ist, dass beispielsweise alle Absätze < p > gleich formatiert werden. Eine Unter-teilung, dass der erste Absatz anders aussieht als der zweite, funktioniert nicht mit dem Typselektor. Hierfür benötigen Sie einen der nachfolgendenspeziellen Selektoren.

3. Klassenselektor

Klassenselektoren formatieren Elemente, die das passende Attribut class zugewiesen haben.

Klassen in html und css

Klassen dürfen beliebig oft auf einer Webseite vorkommen. Versuchen Sie jedoch, einen zu häufi-gen Einsatz von Klassen zu vermeiden, da Sie damit die Webseite nur unnötig mit Code aufblähen. Denn oft lassen sich Klassenselektoren durch klugen Einsatz von ID-, Typselektoren unter Berücksichtung von Kaskade-Regeln einsparen.

4. ID-Selektoren

Mit dem ID-Selektor formatieren Sie jenes Element im HTML-Dokument, das den dazu passenden "Namen" – also das Attribut – id hat:

h1 Ueberschrift mit ID

Eine ID darf - im Gegensatz zur Klasse - nur einmal im HTML-Dokument vorkommen. Der ID Selektor selbst beginnt immer mit einer Raute #. Am häufigsten werden ID Selektoren zum Positionieren eingesetzt. In diesem Beispiel haben wir im HTML-Dokument dem < div > das Attribut id="wrapper" vergeben, daher wird der Inhalt der < div >-Box relativ positioniert und 20 Pixel von links und oben eingerückt.

div Tag mit id bezeichnen

5. Gruppenselektoren

Mit Gruppenselektoren ersparen Sie sich viel Schreibarbeit, denn damit formatieren Sie mehrere Elemente auf einmal. Zählen Sie nacheinander die Selektoren auf, denen Sie die gleiche Formatierung zuweisen wollen.

h1, h2, h3, h4, h5, div#footer {font-family: Arial; }

6. Nachfahrenselektor

Der Nachfahrenselektor wird ebenfalls sehr gerne und häufig eingesetzt. Damit formatieren Sie kurzerhand die Nachkommen eines Elements. Im folgenden Beispiel werden nur alle innerhalb eines Absatzes < p > vorkommenden Hervorhebungen < strong > rot formatiert, alle anderen nicht. Da-bei spielt es keine Rolle, ob sich noch ein weiteres Element zwischen < p > und < em > befindet oder nicht.

p em {color: red;}

Im zweiten Beispiel unten erben alle Geschwisterelemente < a > (Anker-Tag) die Schriftfarbe. Die Eigenschaft betrifft nur alle < a >, die sich in einer ungeordneten Liste < ul > innerhalb des < divid="navi"strong>< / div > befinden.

Navigation mit Liste, id, div

7. Selektor für benachbarte Geschwisterelemente

Dieser Selektor klingt weit komplizierter als er ist. Sie wollen jeden ersten Absatz nach einer Über-schrift fett hervorheben? Dieser Selektor ist ihr Freund dafür.

h2 + p {font-weight: bold;}

Damit wird nur der erste, direkt dem < h1 > nachfolgende Absatz < p > fett dargestellt, alle weiteren darunter befindlichen Absätze < p > nicht mehr.