Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Im letzten Teil über die CSS-Selektoren erforschen wir Kombinatoren und mehrfache Selektoren — zwei Wege, mehrfache Selektoren für weitergehende und nützliche Formatbestimmungsmöglichkeiten zusammenzubringen.

1. Kombinatoren

Einen Selektor solo zu verwenden ist schon nützlich, kann aber für bestimmte Gestaltungsaufgaben sehr umständlich sein. CSS Selektoren spielen ihre besondere Stärke nämlich erst dann aus, wenn Sie anfangen, sie für sehr fein-granulierte Auswahlbestimmungen zu kombinieren. CSS kennt dabei mehrere Wege, um HTML-Elemente zu bestimmen, die darauf basieren, in welcher Beziehung sie zueinander stehen. Diese Anordnungen oder Beziehungen werden durch die Kombinatoren wie folgt ausgedrückt (A und B repräsentieren dabei jeden uns bereits bekannten Selektortyp):

Kombinator wählt jegliches Element aus:
AB das gleichzeitig die Bedingung A und B erfüllt (also von A und B selektiert wird).
A B das die Bedingung B erfüllt, was ein Nachkomme (descendant) eines Elementes ist, das die Bedingung A erfüllt (also ein Kindelement, oder das Kind eines Kindes usw.)
A > B das die Bedingung B erfüllt und ein direktes Kind eines Elementes ist, das die Bedingung A erfüllt.
A + B das die Bedingung B erfüllt und das nächste Geschwisterelement (sibling) eines Elementes ist, das die Bedingung A erfüllt (also: das nächste Kindelement der gleichen Eltern.)
A ~ B das die Bedingung B erfüllt und zu den nächsten Geschwisterelementen (next sibling) eines Elementes gehört, das die Bedingung A erfüllt (also eines der nächsten Kinder der gleichen Eltern.)

Beispiel zu Kombinatoren

An diesem Beispiel schauen wir uns einmal an, wie all das zusammenwirkt:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Menge</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lehnsessel</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow Reis-Bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Buch</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

Dazu wollen wir folgendes CSS Style sheet verwenden, dessen Formatierungs-Kombinatorik wir zunächst nur umgangssprachlich formulieren:

/* Grundlegender Tabellenaufbau */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Alle <td>s in einer <table> und alle <th>s innerhalb einer <table>
   Komma ist kein Kombinator, sonndern erlaubt uns nur, mehrere Selektoren
   mit dem gleichen CSS Regelsatz (ruleset) zu erfassen */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* Alle <th>s innerhalb <thead>s sind innerhalb <table>s */
table thead th {
  color: white;
  background: black;
}

/* Alle <td>s, denen ein anderes <td> vorangeht,
   innerhalb eines <tbody>, innerhalb einer <table> */
table tbody td + td {
  text-align: center;
}

/* Alle <td>s, die ein letztes Kindelement sind,
   innerhalb eines <tbody>, innerhalb einer <table> */
table tbody td:last-child {
  text-align: right
}

/* Alle <th>s, innerhalb eines <tfoot>s, innerhalb einer <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* Alle <td>s, denen ein <th> vorangeht, innerhalb einer <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* Alle Pseudo-Elemente "before" <td>s, die ein letztes Kindelement sind,
   die in Elementen mit der Klasse "with-currency" vorkommen,
   die auch das Attribut "lang" mit dem Wert "en-US" aufweisen. */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* Alle Pseudo-Elemente "after" <td>s, die ein letztes Kindelement sind,
   und in HTML-Elementen mit der Klasse "with-currency" auftauchen,
   die auch ein Attribut "lang" mit dem Wert "fr" aufweisen. */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

Diese Vorschriften haben uns die folgende ziemlich brauchbare Tabellengestaltung (rather nice table styles) eingebrockt:

Mitmachen: Selber mal Kombinatoren entwerfen

Das vorige Beispiel war dazu gedacht, die Komplexität der Gestaltungsmöglichkeiten mal darzustellen, die man mit Kombinatoren erzielen kann. In dieser Übung möchten wir Sie bitten, selbst einige einfache Kombinatoren zu entwerfen, die selbst wiederum Kombinatoren enthalten. Dazu müssen Sie den Regeln 2-4 einen Selektor beifügen, um nur solche Links zu gestalten:

  1. die sich in einer ungeordneten Liste befinden,
  2. die in der ungeordneten Liste sind, aber nur, wenn man mit der Maus darüber fährt!
  3. Gestalten Sie nur den Absatz, der direkt auf die oberste Überschrift folgt (after the top level heading).

Bei Fehler hilft die Zauberschaltfläche Reset zur Wiederherstellung aller Dinge. Sollte es Ihnen zuviel werden - ein Klick auf Show solution befreit Sie vom Kopfzerbrechen und zeigt eine mögliche Lösung.

2. Mehrfache Selektoren für eine Regel

Sie haben bereits mehrfache Beispiele dazu in Aktion gesehen, dennoch werden wir es jetzt noch explizit erläutern und damit Klarheit schaffen: Mehrfache Selektoren schreiben Sie hintereinander per Komma getrennt, damit die gleiche Regel auf mehrfache Sets (Anordnungen) ausgewählter/bestimmter Elemente zugleich Anwendung findet. Ein einfaches Kurzbeispiel:

p, li {
  font-size: 1.6em;
}

oder mal dieses hier:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Was kommt jetzt?

Gratulation erstmal. Nach einer etwas längeren Lern-Reise zu den Selektoren sind Sie am Ende angekommen. Jeder bewanderte Webentwickler bewundert die Möglichkeiten, die man mit Selektoren so hat. Lassen Sie sich bitte nicht entmutigen, wenn Ihnen nicht gleich alle Optionen dazu wieder einfallen. Nehmen Sie die Hauptsite der Selektoren in Ihre Favoriten auf und schauen Sie nach, wenn es erforderlich ist.

In unserem nächsten Thema wenden wir uns einem anderen ziemlich wichtigen grundlegendem CSS Thema zu — nämlich welche Werte die Eigenschaften (properties) annehmen können und welche Maßeinheiten daran beteiligt sind, um Länge, Farbe oder andere gewünschte Werte zu formulieren. Gehen wir also an die Erforschung von CSS Werten und Einheiten.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Kammreiter
 Zuletzt aktualisiert von: Kammreiter,