CSS Selektoren

▻

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

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:

▻

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

▻

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

(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; }

▻

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

▻

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

▻

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

▻

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