Fork me on GitHub

Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Um CSS Selektoren zu verstehen muss man das Document Object Betrachten: die Darstellung des HTML-Dokuments als Baum:

Document Object Model und Selektor

Bei der Beschreibung des Baumes verwendet man folgende Fachbegriffe:

  • Elemente,
  • Texte,
  • Nodes
  • Eltern-Element,
  • Kinder
  • Vorfahren,
  • Nachkommen

Universal Selector

Der Selektor * wählt alle Elemente des Baums aus:

Document Object Model und Selektor

Type Selector

Über den Namen des HTML-Tags wählt man alle Elemente dieses Typs aus, zum Beispiel wählt li alle Listen-Elemente aus:

  li { color: red; }

Document Object Model und Selektor

Selector List

Mehrere Selektoren können mit Kommas zu einer Liste gruppiert werden. Das Komma entspricht einem “Oder”: selektiert werden Tags die entweder h1 sind, oder h2, oder a:

  h1,h2,a { color: red; }

Document Object Model und Selektor

(Achtung Falle: für Links mit dem a Tag gelten noch zusätzliche Regeln, siehe weiter Unten.)

Descendant Combinator

Hier werden zwei Selektoren mit einem Leerzeichen dazwischen geschrieben.

Im Beispiel unten werden alle a Tags ausgewählt, die Nachkomme eines div sind:

Achtung: div wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!

  div a { color: red; }

Document Object Model und Selektor

Verschachteltes CSS

(Neu in 2023)

Auch hier wird ein Element ausgewählt, das Nachkomme eines anderen Elements ist.

Achtung: div wird nur zur Auswahl benützt, wird aber selber nicht ausgewählt!

  div {
    & a {
      color: red;
    }
  }

Document Object Model und Selektor

Praktisch: man kann die Deklarationen für div auch mit rein schreiben:

  div {
    border: 1px gray solid;
    padding: 10px;
    & a {
      color: red;
    }
  }

Demo: Verschachteltes CSS

Der Browser unterscheidet bei der Darstellugn von Links zwischen denen die schon einmal besucht wurden (visited) und neuen Links (link).

Die Default Einstellung der Browser entspricht ungefähr folgendem CSS:

  a:any-link { text-decoration: underline; }
  a:link    { color:blue; }
  a:visited { color:#FF00FF; }

Im folgenden Beispiel werden die Links mit einem Icon markiert:

  a:link, a:visited {
     background-image:    url(icon-link.gif);
     background-position: center right;
     background-repeat:   no-repeat;
     padding-right:       9px;
  }

Demo

Interaktion

Die Pseudo-Klassen :hover und :active gelten bevor ein Link wirklich geladen wird: :hover schlägt an wenn die Maus sich über dem Element befindet. Auf Touch-Geräten hat es keine Wirkung.

:active wird wirksam, wenn der Link wirklich mit Klick oder Touch ausgelöst wird:

Demo

Und noch viel mehr

Im Kapitel CSS Selektoren im Detail geht es weiter.