Styling bestimmter n-ter untergeordneter Elemente über mehrere übergeordnete Elemente hinweg

Beim Stylen verschachtelter Elemente mithilfe des n-ten untergeordneten Selektors ist es wichtig zu beachten, dass der Selektor arbeitet in einem einzigen übergeordneten Kontext. Dies kann zu Herausforderungen führen, wenn bestimmte untergeordnete Elemente über mehrere übergeordnete Elemente hinweg gezielt angesprochen werden.

Das Problem:

Beachten Sie das folgende Markup:

    
one
        
two
    
three
    
four
    

Das Ziel besteht darin, das erste und dritte li-Element in .foo zu formatieren. Mit dem folgenden CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

Dieser Ansatz funktioniert nicht, da das n-te Kind das erste und dritte Kind jeder ul auswählt.

Die Lösung:

Verwendung von CSS Allein ist es nicht möglich, n-te Kinder mehrerer Eltern anzusprechen. Es gibt jedoch alternative Lösungen:

• JavaScript: Bibliotheken wie jQuery machen es einfach, DOM-Elemente zu manipulieren und bestimmte auszuwählen, wie zum Beispiel $('.foo li:eq( 0), .foo li:eq(2)').
• Explizites Markup: Fügen Sie Klassen oder IDs zum hinzu erstes und drittes li-Element explizit, wie zum Beispiel:

    
one
        
two
    
three
    
four
    

Dann formatieren Sie sie mit den neu hinzugefügten Klassen:

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