Frage CSS: focus nach before

[satriani]

Hallo liebe Leute,
ich bearbeite ein Menu aus einem WP Theme, das so aussieht:



und hier der Code:

#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li.current-menu-item:nth-child(1n) > a:before,
#masthead .right-menu li:nth-child(1n):before,
#masthead .right-menu ul > li:nth-child(1n):hover > a,
#masthead .right-menu ul > li:nth-child(1n) > a:before {
color: #808080 ;
}

#masthead .right-menu li:nth-child(1n):before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #fd0000 ;
}

Das Ziel ist, nur das geklickte Element soll sich rot färben, sprich Text und das fa-Icon sollen sich rot färben.
Bis jetzt funktioniert das nur mit dem Text, leider nicht mit den fa-Icons, die färben sich alle rot, egal ob geklickt oder nicht :(
Ich habe den entsprechenden Code Part wie folgt geädert, leider ohne Erfolg.

#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li:nth-child(1n):before > a:focus,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #fd0000 ;
}

Bitte um Rat und danke im Voraus.

 

[basti1012]

Kannst du mal den html Teil auch dazu posten ?
Das wäre dann einfacher für uns

 

[satriani]

Ja, natürlich. Danke für die Antwort.

<nav class="main-navigation right-menu">
    <ul id="menu-right-header-menu" class="menu nav-menu">
        <li id="menu-item-172" class="fa-th-large menu-item menu-item-type-custom menu-item-object-custom menu-item-172"><a href="#Behandlungsfelder" data-ps2id-api="true">Behandlungsfelder</a></li>
        <li id="menu-item-173" class="fa-comments menu-item menu-item-type-custom menu-item-object-custom menu-item-173"><a href="#Unterstützte-Kommunikation" data-ps2id-api="true">Unterstützte<br/>Kommunikation</a></li>
        <li id="menu-item-174" class="fa-users menu-item menu-item-type-custom menu-item-object-custom menu-item-174"><a href="#Team" data-ps2id-api="true">Team</a></li>
        <li id="menu-item-175" class="fa-book menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-175"><a href="#Publikationen" data-ps2id-api="true">Publikationen</a></li>
        <li id="menu-item-99" class="fa-graduation-cap menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-99"><a href="#Fortbildungen-und-Workshops" data-ps2id-api="true">Fortbildungen<br/>und<br/>Workshops</a></li>
        <li id="menu-item-100" class="fa-calendar menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-100"><a href="#Termin" data-ps2id-api="true">Termin</a></li>
        <li id="menu-item-101" class="fa-map menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-101"><a href="#So-finden-Sie-uns" data-ps2id-api="true">So finden Sie uns</a></li>
        <li id="menu-item-102" class="fa-envelope menu-item menu-item-type-post_type menu-item-object-page menu-item-type-custom menu-item-object-custom menu-item-102"><a href="#Kontakt" data-ps2id-api="true">Kontakt</a></li>
    </ul>
</nav>

So sieht das Ergebnis aus:

 

[basti1012]

Hast du das zufäliger weise schon Online ?
Ich komme ohne die komplette Css da nicht weiter.(und abschreiben bin ich zu faul)
Vieleicht kann das auch wer anders mit den jetzigen angaben machen ,doch ich bin geradezu blöd dazu.

 

[satriani]

Leider nicht, aber hier ist der Link zu Theme: https://themepalacedemo.com/kids-education/
Das Menü ist bunt, es muss aber einheitlich grau sein und nur beim klicken soll es sich rot färben.

 

[Gelöschtes Mitglied 36401]

Hast du ein Child-Theme angelegt? Wenn nicht, hast du spätestens ein Problem, wenn ein Update des Themes ansteht, denn dann werden deine Änderungen in der CSS wieder überschrieben. Und alles im Custom-CSS einzutragen ist nicht gerade schön.

 

[satriani]

Hallo,
ja ich habe ein Child-Theme angelegt. Danke für den Hinweis.

 

[satriani]

OK, durch folgende Änderung habe ich zumindest den gewünschten Effekt, wenn man mit der Maus drüberfährt

#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li:nth-child(1n):hover:before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
color: #ff0000 ;
}

Und so sieht das ganze dann aus:

Wie erreiche ich es jetzt, dass der geklickte Element gefärbt bleibt?

 

[basti1012]

Such dir was aus ,

Klasse setzen,
Get Link,
Cookie,
localStorage.

Man müßte aber auch wissen ob du ein Seite hast wo alles über Ajax nachgeladen wird , oder ob du auf einen anderen Link geleitet wirst beim Menü klicken?.

Du möchtest doch bestimmt das wenn man auf Home klickt, das der Link Home dann auf der Home Seite eine andere Farbe hat ?
Du könntest auch für jede Seite die Css ändern das da der Link eingefärbt ist, doch das ist etwas umständlich , gerade bei vielen Menü Punkten

 

[satriani]

OK ich hab's.
So muss es aussehen:

#masthead .right-menu li.current-menu-item:nth-child(1n) > a,
#masthead .right-menu li.current-menu-item:nth-child(1n):before,
#masthead .right-menu li:nth-child(1n):hover:before,
#masthead .right-menu ul > li:nth-child(1n):hover > a {
   color: #ff0000 ;
}

Danke basti1012