Aktiv: Erstes Kind Styling

Question

Ich färbe derzeit das erste Element meines Menüs (via :firstchild Pseudo) in einer anderen Farbe. Allerdings ist das erste Element manchmal versteckt (via display:none) und ich möchte das aktive erste Element gefärbt haben.

Ich hätte erwartet, dass versteckte Elemente nicht als firstchild gezählt werden, aber anscheinend werden sie immer noch über das :firstchild Pseudo gestylt.

Was kann ich in diesem Fall tun?

Answer 1

Machen Sie etwas Ähnliches wie dies:

    Menüpunkt 1
    Menüpunkt 2
    Menüpunkt 3
    Menüpunkt 4

li:first-child {
    color: red;
}

.hidden {
    display: none;
}

.hidden + li {
    color: red;
}

Verstecken Sie das Element, indem Sie eine Klasse hinzufügen, und stylen Sie das zweite Element mit dem benachbarten Kind-Selektor (+).

Demo