Nur einen menuOverlayItemSpacer im mobilen Seitenmenü per CSS ansprechen

  • Hier mal ein Bild des mobilen Seitenmenüs:

    Jeweils unterhalb von Forum und Impressum befindet sich ein Listenelement der Klasse menuOverlayItemSpacer. Es ist zwar kein Problem, diese beiden Elemente mittels .pageMainMenuMobile li.menuOverlayItemSpacer {mein Code} anzusprechen, aber es gelingt mir nicht, nur das zweite Listenelement unter Impressum zu beeinflussen.


    Dieser Code hat keinen Effekt:

    CSS
    .pageMainMenuMobile li.menuOverlayItemSpacer:last-of-type {
        mein Code
    }

    Hat jemand eine Erklärung, warum das nicht funktioniert oder noch besser eine Idee, wie ich das lösen kann?


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Der Selektor :last-of-type (und Konsorten) funktioniert anders als du wahrscheinlich annimmst. Die CSS-Klasse ist hierbei ein zusätzlicher Filter, denn faktisch selektierst du damit das letzte <li> und gibst zusätzlich noch die Bedingung, dass es die CSS-Klasse menuOverlayItemSpacer aufweisen muss.

    Es ist grundsätzlich nicht möglich mit diesen Selektoren das n. Vorkommen einer CSS-Klasse zu selektieren.

  • Gäbe es denn einen anderen Weg, genau dieses Listenelement zu treffen?


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Danke an Euch beide. Den Vorschlag von Alex mit der Tilde hatte ich letztens hier schon mal gesehen, aber nicht wieder gefunden. Alle anderen Versuche mit :last-child, .nth-child, :nth-of-type habe ich bereits erfolglos probiert.

    Ich teste jetzt mal weiter.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Ich teste jetzt mal weiter.

    Vielleicht nicht die beste Lösung, aber wenn explizit das Element nach dem Impressum angesprochen werden soll:

    Code
    .pageMainMenuMobile .menuOverlayItem[data-mobile-identifier="com.woltlab.wcf.LegalNotice"] + li.menuOverlayItemSpacer {

    Das funktioniert allerdings wie der Code vermuten lässt nur wenn der ItemSpacer direkt auf das LegalNotice folgt.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!