Die Gestaltung von Text und Inhalt einer Website mit HTML-Code ist nur ein „Baustein“ das Frontend einer Website. Ein weiterer großer Teil dieses Prozesses ist die Erstellung des visuellen Stils, der von bestimmt wird die CSS-Regeln.
Immer wenn wir eine neue Website erstellen oder größere Layout-Änderungen an einer bestehenden vornehmen, möchten wir unweigerlich, dass bestimmte Teile unserer Website ein bestimmtes Aussehen haben. Um dies zu tun, ist es wichtig zu verstehen, wie man die verschiedenen CSS-Kombinatoren, wie der CSS-Nachkommenselektor. Dieser CSS-Kombinator ermöglicht es, dass große Bereiche einer Website die gleichen Stiländerungen auf einmal erhalten.
Was ist ein CSS-Descendant-Selektor?
Der CSS-Nachkommenselektor ist einer von vier verschiedenen CSS-Kombinatoren. Wenn zwischen zwei Selektoren ein einzelnes Leerzeichen ( ) eingefügt wird, gelten dieselben Stilelemente auch für den zweiten Selektor, vorausgesetzt, die Nachkommen teilen sich denselben ersten Selektor.
Um einen CSS-Nachkommenselektor zu verstehen, müssen Sie zuerst
CSS-Selektoren verstehen. Der beste Weg, einen Selektor zu beschreiben, besteht darin, dass es sich um einen CSS-Operator handelt, der den HTML-Teil identifiziert, den Sie formatieren möchten. Es wird Selektor genannt, weil es jedes HTML-Bit „auswählt“, das denselben Operator wie das CSS-Elternteil hat.Häufige Beispiele für solche Operatoren sind:
div
Dies ist ein Tag, das einen Abschnitt von HTML definiert, der Dinge wie Absätze und Inhalt enthalten kann, oder:
li
das ist eine geordnete Liste. Ein weiteres ähnliches Tag ist:
ul
Dadurch wird eine ungeordnete Liste erstellt. Komplexere Muster werden auch als Selektoren bezeichnet. Einfach ausgedrückt, sagt ein CSS-Nachkommenselektor einer Website, wie sie aussehen soll, wenn ein Selektor unter einem gemeinsamen Vorfahren „verschachtelt“ ist.
Der erste Selektor wird der CSS-Elternteil oder der „Vorfahren“-Selektor und der zweite Selektor wird der Nachkomme. Stellen Sie sich vor, wie ein Dateiverzeichnis funktioniert: Das CSS-Elternteil ist wie ein Ordner, der andere Ordner enthält, die auch eigene Ordner enthalten können.
Von den vier Kombinatoren ist der einzige, der alles auswählt, was unter einem bestimmten CSS-Elternteil verschachtelt ist, der CSS-Nachkommenselektor. Es gibt drei weitere Kombinatoren.
- Der untergeordnete Selektor (‘>’ anstelle eines einzelnen Leerzeichens) wählt nur Elemente aus, auf die der erste Selektor in einem Kombinator verweist. Wenn der erste Selektor (div) und der zweite Selektor (p) ist, wird nur (p) ausgewählt, solange es (div) als Vorfahren hat. Wenn ein Absatz unter einem neuen (Abschnitt) erstellt wird, werden die Stilregeln nicht eingehalten, auch wenn er sich im selben (div) befindet.
- Der benachbarte Geschwisterselektor („+“ statt einzelner Leerzeichen) wählt nur das Element aus, das dem zweiten Selektor im Kombinator am nächsten liegt. Wenn der erste Selektor (div) und der zweite Selektor (p) ist, wird das erste Element ausgewählt, das (p) verwendet, aber nicht (div).
- Der allgemeine Geschwisterselektor („~“ anstelle eines einzelnen Leerzeichens) wählt alle Elemente aus, mit Ausnahme derjenigen, auf die der zweite Selektor verweist. Wenn der erste Selektor (div) und der zweite Selektor (p) ist, wird jedes Element ausgewählt, das nicht (p) ist.
Wie sieht ein CSS-Descendant-Selektor aus?
Im folgenden Beispiel für zwei verschiedene CSS-Nachkommenselektoren, die nebeneinander arbeiten, ist (div) der erste Selektor im ersten Kombinator, während (ul) der erste Selektor im zweiten ist Kombinator. In beiden CSS-Nachkommenselektoren wird (p) als zweiter Selektor verwendet.
Die Stilelemente unterscheiden sich zwischen (div) und (ul), aber (p) trägt in beiden Fällen eindeutig die Merkmale seines CSS-Elternteils.
Warum einen CSS-Descendant-Selektor verwenden?
Um die Bedeutung des CSS-Nachkommenselektors zu verstehen, ist es wichtig, zuerst CSS-verschachtelte Selektoren zu verstehen.
Wir möchten im Allgemeinen, dass bestimmte Stilregeln für die gesamte Website gelten, z. B. die bestimmte Größe oder Schriftart, die standardmäßig für den gesamten Absatz (p) verwendet wird. Ebenso kann HTML unordentlich aussehen, wenn diese Stilregeln für jeden einzelnen Absatz und nicht für die gesamte Website angewendet werden.
Verschachteltes CSS ist durch die Verwendung von CSS-Kombinatoren wie dem CSS-Nachkommenselektor möglich. Durch „Verschachteln“ von CSS unter einem übergeordneten Selektor ist es möglich, einer Website schnell und effizient mitzuteilen tell wie ein bestimmter Selektor in jedem Szenario aussehen soll, auf das das CSS-Elternteil verweist.
Die Verwendung eines verschachtelten CSS-Selektors ermöglicht es uns, die gleichen Regeln anzuwenden, um mehrere Abschnitte einer Site gleichzeitig zu gestalten, wodurch wir mit weniger Arbeit auskommen und gleichzeitig unseren HTML-Code sauber und makellos halten.