Selektoren

Aufbau einer CSS-Regel

Regel besteht aus Selektor und Deklarationen

Der Selektor legt fest, für welche Elemente die Regel gilt
Die Deklarationen bestimmen die Darstellung der Elemente
Eine Deklaration weist einer Eigenschaft einen Wert zu (getrennt durch einen Doppelpunkt)
Deklarationen werden durch Semikolon getrennt

Unterschiedliche Selektoren

Universal (*): Alle Elemente
Typ: Alle Elemente eines Typs (z. B. <h1>)
ID (#name): Element mit einer ID
Klasse (.name): Elemente, die einer Klasse über das class-Attribut zugeordnet wurden
Gruppen (a, b, c): Alle Elemente der Gruppe auf einmal
Nachfahre (a b): Nachfahren
Kind (a > b): Kinder von einem Element sind
Nachbar (a + b): Direkt benachbarte Elemente
Geschwister (a ~ b): Geschwister auf derselben Ebene
Pseudoklassen (:klasse): Eingebaute Klassen

Beispiel: HTML-Datei für Selektoren

<h1>Überschrift Ebene 1</h1>

<p>Erster Absatz mit etwas Text</p>
<p>Zweiter Absatz mit auch noch etwas Text</p>

<h2>Überschrift Ebene 2</h2>
<ul>
  <li>Apfel</li>
  <li>Birne</li>
</ul>

<div id="info">
  Dieser Text hat die ID "info".
</div>

<p>Manche Informationen sind <span class="wichtig">wichtig</span> und
müssen daher <em class="wichtig">hervorgehoben</em> werden.</p>

Universalselektor (*)

Wählt alle Elemente aus

/* Alle Elemente in dunkelgrün darstellen */
* { color: darkgreen; }

Typselektor

Wählt bestimmte HTML-Elemente aus

/* Überschriften einfärben */
h1 { color: olive; }
h2 { color: blue; }

ID-Selektor

Wählt ein Element anhand seiner ID aus

/* Element mit ID "info" mit Rahmen versehen */
#info { border-style: solid;
        border-width: 3px; }

Klassenselektor

Wählt alle Elemente einer CSS-Klasse aus

/* Alle Elemente der Klasse "wichtig" einfärben. */
.wichtig { color: red; font-weight: bold; }

Klassenselektor (kontextabhängig)

Bestimmte Elemente, die eine CSS-Klasse haben

/* Nur "wichtig" bei em einfärben. */
em.wichtig { color: red; font-weight: bold; }

Gruppenselektor

Aufzählung aller Selektoren für die die Regel gilt

/* Alle Überschriften und wichtigen Elemente in olive */
h1, h2, .wichtig { color: olive; }

Beispiel: HTML-Datei für Selektoren

<h1>Überschrift Ebene 1</h1>

<p>Ein Absatz, der ein <q>Zitat enthält, in dem es eine <em>Hervorhebung</em> gibt.
</q> und danach ganz normal weiterläuft.</p>

<p>Huch, noch eine <em>Hervorhebung</em>, jetzt aber außerhalb des Zitates.</p>

<q>Hier ein Zitat ohne Absatz.</q>

Nachfahren-Selektor

Formatiert Elemente, die in einem anderen vorkommen

p q { color: grey; } /* Zitate in Absätzen grau */
p q em { text-decoration: underline; } /* em in Zitaten in Abs. unterstreichen */

Formatiert Elemente, die in einem anderen vorkommen

p q { color: grey; }  /* Zitate in Absätzen grau */
p em { text-decoration: underline; } /* em in Zitaten in Absätzen unterstreichen */

Kindselektor

Formatiert direkte Kinder eines Elements

p > em { text-decoration: underline; } /* em nur direkt in Absätzen unterstreichen */
q > em { color: olive; } /* em in Zitaten olive */

Nachbar-Selektor

Formatiert direkt benachbarte Elemente auf gleicher Ebene

/* Ersten Absatz nach Überschrift einfärben */
h1 + p { color: olive; }

Geschwister-Selektor

Formatiert Elemente die auf gleicher Ebene folgen

/* Ersten Absatz nach Überschrift einfärben */
h1 ~ p { color: olive; }

Pseudoklassen

Pseudoklassen sind Selektoren zur Auswahl von Elementen, die nicht eigenständig im HTML ausgezeichnet sind

Klasse	Beschreibung
`:link`	Link im originalen Zustand von <a>
`:visited`	Link nachdem er angeklickt wurde
`:hover`	Link, wenn die Maus über dem Link steht
`:active`	Link, wenn er gerade angeklickt wird
`:focus`	Element, dass gerade den Fokus hat (Formulare, Links)

/* Links stylen */
a:link { color: olive; }
a:visited { color: grey; }
a:active { color: red; }
a:hover { font-weight: bold; }