Frage CSS: focus nach before

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

satriani

Neues Mitglied
10 August 2019
6
0
1
39
Hallo liebe Leute,
ich bearbeite ein Menu aus einem WP Theme, das so aussieht:

5196

und hier der Code:
CSS:
#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.
 

satriani

Neues Mitglied
10 August 2019
6
0
1
39
Ja, natürlich. Danke für die Antwort.
HTML:
<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:

 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
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.
 

m.scatello

Aktives Mitglied
15 Februar 2017
996
119
43
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

Neues Mitglied
10 August 2019
6
0
1
39
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:
5200
Wie erreiche ich es jetzt, dass der geklickte Element gefärbt bleibt?
 

basti1012

Senior HTML'ler
26 November 2017
1.070
113
63
38
Minden
sebastian1012.bplaced.net
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
 
Zuletzt bearbeitet:

satriani

Neues Mitglied
10 August 2019
6
0
1
39
OK ich hab's.
So muss es aussehen:
CSS:
#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
 
Werbung: