CSS Selektoren

▻

DOM

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

Document Object Model und Selektor

▻

Über Bäume reden

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: yellow; }

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: yellow; }

Document Object Model und Selektor

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

▻

Class Selector

Klassen-Namen können wir als Developer*innen einfach erfinden, und an beliebigen html-tags verwenden. Damit kann man verschiedene “Varianten” eines Tags erstelle, hier sind z.B. zwei “normale” Absätze und einer der wichtig ist:

  <h2>Dies und Das</h2>
  <p>Dies</p>
  <p class="wichtig">und</p>
  <p>Das</p>

  .wichtig { color: yellow; }

Document Object Model und Selektor

▻

ID Selector

Auch ID-Attribute können wir als Developer*innen einfach erfinden, und an beliebigen html-tags verwenden. Aber: in einem HTML Dokument darf jede ID nur einmal vorkommen.

Jedes ID-Attribut ist gleichzeitig eine “Textmarke” und kann in der URL mit dem Rautezeichen # aufgerufen werden.

Wenn folgendes Dokument unter der URL http://example.com/page.html erreichbar ist:

  <body>
    <header>
      <nav id="menu">Navigation...</nav>
      <h1>Überschrift</h1>
    </header>
    <main>
      ...
    </main>
    <footer id="c">
      copyright (c) ...
    </footer>
  </body>

Gibt es zwei Textmarken:

http://example.com/page.html#menu
http://example.com/page.html#c

Der Selektor beginnt ebenfalls mit diesem Zeichen:

  #menu { color: yellow; }

Document Object Model und Selektor

▻

Descendant Combinator

Hier werden zwei Selektoren mit einem Leerzeichen dazwischen geschrieben.

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

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

  section a { color: yellow; }

Document Object Model und Selektor

▻

Verschachteltes CSS

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

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

  section {
    & a {
      color: yellow;
    }
  }

Document Object Model und Selektor

▻

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

  section {
    border: 1px gray solid;
    padding: 10px;
    & a {
      color: yellow;
    }
  }

Und man kann das kaufmännische Und weglassen:

  section {
    border: 1px gray solid;
    padding: 10px;
    a {
      color: yellow;
    }
  }

Demo: Verschachteltes CSS

▻

Links formatieren

Der Browser unterscheidet bei der Darstellung 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.
Selektor Demo - mit dieser Seite wurden die Illustrationen erstellt

▻

Übungsfragen

Testen Sie Ihr Wissen — die Antworten werden nur lokal in Ihrem Browser gespeichert.

▻

Welche Elemente wählt der Selektor * aus?

Alle Elemente des Dokuments
Nur das Wurzel-Element html
Alle Elemente mit einer Klasse
Gar keine — * ist ein Kommentar-Zeichen

Kommentare sehen in CSS so aus: /* ... */

▻

Was bewirkt das Komma im Selektor h1,h2,a { color: yellow; }?

Eine Oder-Verknüpfung: ausgewählt werden alle h1-, alle h2- und alle a-Elemente
Eine Und-Verknüpfung: nur Elemente, die gleichzeitig h1, h2 und a sind

Ein Element hat immer genau einen Tag-Namen — „gleichzeitig h1 und h2“ ist unmöglich.
Es wählt a-Elemente aus, die in h1 oder h2 verschachtelt sind

Für Nachkommen verwendet man den Descendant Combinator: ein Leerzeichen, kein Komma.
Das Komma ist ein Syntax-Fehler

▻

In einem Dokument steht <nav id="menu">. Welche Aussage stimmt?

Die ID menu darf im Dokument beliebig oft vorkommen

Das gilt für Klassen — jede ID darf nur einmal vorkommen.
#menu selektiert dieses Element, und seite.html#menu springt als Textmarke dorthin
IDs können nur an nav-Tags vergeben werden
Der passende Selektor lautet .menu

Der Punkt selektiert Klassen; für IDs verwendet man die Raute #.

▻

Welche Elemente wählt section a { color: yellow; } aus?

Alle a-Elemente, die Nachkommen eines section-Elements sind
Alle section- und alle a-Elemente

Das wäre die Selector List mit Komma: section, a.
Alle section-Elemente, die ein a enthalten

section wird nur zur Auswahl benützt, aber selbst nicht ausgewählt.
Nur a-Elemente, die direkte Kinder von section sind

Der Descendant Combinator (Leerzeichen) gilt für alle Nachkommen, nicht nur Kinder.

▻

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig