CSS Nachkommenselektoren

Nachfolger-Selektor (descendant selector) wird auch als Enthaltungs-Selektor bezeichnet.

Nachkommen-Selektoren können Elemente auswählen, die Nachkommen eines bestimmten Elements sind.

Nach dem Kontext auswählen

Wir können Nachkommen-Selektoren definieren, um einige Regeln zu erstellen, die in bestimmten Dokumentstrukturen wirksam sind, aber in anderen Strukturen nicht wirksam sind.

Zum Beispiel, wenn Sie möchten, dass nur die em-Elemente in h1-Stilen angewendet werden, können Sie dies so schreiben:

h1 em {color:red;}

Diese Regel würde den Text von em-Elementen, die Nachkommen von h1 sind, in Rot umwandeln. Andere em-Texte (wie Absätze oder Blockzitate) werden von dieser Regel nicht ausgewählt:

<h1>Das ist ein <em>wichtige</em> Überschrift</h1>
<p>Das ist ein <em>wichtiges</em> Absatz.</p>

Selbst ausprobieren

Natürlich können Sie auch jedem em-Element, das in h1 gefunden wird, ein class-Attribut hinzufügen, aber offensichtlich ist der Nachkommen-Selektor effizienter.

Grammatikalische Erklärung

In einem Nachkommen-Selektor enthält die linke Seite der Regel zwei oder mehrere durch Leerzeichen getrennte Selektoren. Der Leerzeichen-Kombinator zwischen den Selektoren ist ein Kombinator. Jeder Leerzeichen-Kombinator kann als '... in ... finden', '... als Teil von ...', '... als Nachkommen von ...' interpretiert werden, aber es muss von rechts nach links gelesen werden.

Der Selector 'h1 em' kann als 'jeder em, der ein Nachkommen von h1 ist' interpretiert werden. Wenn der Selector von links nach rechts gelesen wird, kann dies so gesagt werden: 'Alle h1, die em enthalten, wenden den folgenden Stil auf dieses em an'.

Konkretes Beispiel

Der Nachkommen-Selektor ist extrem mächtig. Mit ihm können Aufgaben in HTML, die unmöglich zu realisieren sind, in die Tat umgesetzt werden.

Angenommen, es gibt eine Dokument, das eine Sidebar und einen Hauptbereich hat. Der Hintergrund der Sidebar ist blau, der Hintergrund des Hauptbereichs ist weiß, beide Bereiche enthalten eine Liste von Links. Es kann nicht alle Links blau gestaltet werden, da sonst die blauen Links in der Sidebar nicht sichtbar wären.

Die Lösung besteht darin, einen Nachkommen-Selektor zu verwenden. In diesem Fall kann der class-Attribut von div, das die Sidebar enthält, auf 'sidebar' gesetzt werden, und der class-Attributwert des Hauptbereichs auf 'maincontent' gesetzt werden. Anschließend können Sie die folgenden Stile schreiben:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Ein leicht übersehener Aspekt der Nachkommenselektoren ist, dass der Abstand zwischen zwei Elementen unendlich sein kann.

Zum Beispiel wählt die Syntax ul em alle em-Elemente aus, die von dem ul-Element vererbt werden, unabhängig von der Tiefe der Nestung.

Daher wählt ul em alle em-Elemente in den folgenden Markierungen aus:

<ul>
  <li>Listeneintrag 1</li>
    <ol>
      <li>Listeneintrag 1-1</li>
      <li>Listeneintrag 1-2</li>
      <li>Listeneintrag 1-3</li>
        <ol>
          <li>Listeneintrag 1-3-1</li>
          <li>Listeneintrag</li> <em>1-3-2</em></li>
          <li>Listeneintrag 1-3-3</li>
        </ol>
      </li>
      <li>Listeneintrag 1-4</li>
    </ol>
  </li>
  <li>Listeneintrag 2</li>
  <li>Listeneintrag 3</li>
</ul>

Selbst ausprobieren