Styling verschachtelter n-ter-Kind-Elemente über mehrere übergeordnete Elemente hinweg

Wenn Sie nach einer Lösung suchen, um bestimmte verschachtelte Elemente innerhalb unterschiedlicher übergeordneter Strukturen zu formatieren, sollten Sie das folgende Markup in Betracht ziehen :

• one
• two

• three

• four

Das Ziel besteht darin, Stile auf „eins“ und „drei“ anzuwenden, unabhängig davon, ob es sich um die ersten untergeordneten Elemente handelt von jedem

.

Einschränkung von :nth-child()

Versuche, :nth-child() zu verwenden, scheitern, weil es nur auf Elemente angewendet wird, die denselben Elternteil haben. In diesem Szenario würde der CSS-Selektor .foo li:nth-child(1), .foo li:nth-child(3) nur auf die ersten untergeordneten Elemente jeder

.

Alternative abzielen Lösungen

JavaScript:

Mit einer Bibliothek wie jQuery können Sie Elemente mithilfe der leistungsstarken Filterfunktionen von JavaScript auswählen. Das folgende Skript zielt beispielsweise auf das erste und dritte

• -Element im .foo-Container ab:

  $('.foo li:eq(0), .foo li:eq(2)')

  Explizite Elementmarkierung:

  Sie können die gewünschten Elemente explizit mit Klassen oder IDs markieren, um deren Auswahl per CSS zu ermöglichen. Zum Beispiel das Hinzufügen von Klassen zum ersten und dritten

• -Element:

• one
• two

Dann können Sie CSS verwenden, um auf die markierten Elemente abzuzielen:

.foo .first,
.foo .third {
    color: red;
}