CSS Kind-Selektoren

noobie

Hallo,

ich versuche mich gerade daran ein menü auf basis einer liste zu erstellen und scheitere leider an den css selektoren. Nachfolgend der html-code, den ich zum testen nehme:

HTML

<html>
  <head>
    <title>test-menu</title>
    <meta content="">
    <link rel="stylesheet" type="text/css" href="test-menu.css" media="screen" />
    <script language="javascript" type="text/javascript" src="test-menu.js"></script>
    <style></style>
  </head>
  <body>
    <nav>
        <ul class="menu">
            <li>home</li>
            <li>kontakt</li>
            <li id="hover1">impressum


              <ul class="sub-menu">
                <li>imp1</li>
                <li id="hover2">imp1
                  <ul class="sub-menu">
                    <li>imp12</li>
                    <li id="hover3">imp12
                      <ul class="sub-menu">
                        <li>imp13</li>
                        <li>imp13</li>
                        <li id="hover4">imp13
                          <ul class="sub-menu">
                            <li>imp14</li>
                            <li>imp14</li>
                            <li>imp14</li>
                            <li>imp14</li>
                          </ul>
                        </li>
                        <li>imp13</li>
                      </ul>
                    </li>
                    <li>imp12</li>
                    <li>imp12</li>
                  </ul>
                </li>
                <li>imp1</li>
                <li>imp1</li>
                <li>imp1</li>
              </ul>
            </li>
            <li>datenschutz</li>
            <li>home</li>
            <li>kontakt</li>
            <li>impressum</li>
            <li>datenschutz</li>
            <li>home</li>
            <li>kontakt</li>
            <li>impressum</li>
            <li>datenschutz</li>
        </ul>
    </nav>

Alles anzeigen

Mein Problem: ich möchte per css die listen elemente der ersten ebene ansteuern, später sicher auch die nachfolgenden ebenen.

wie ich auf zB https://www.mediaevent.de/css/css-selekt…xtselektor.html gelesen habe, sollte

ul > li {
color: green;
}

die erste menü-ebene anwählen. also alle li-elemente, die direkt im ul-element mit der klasse ".menu" liegen. wählt aber leider alle li aus.

nav > ul.menu:first-child {
color: red;
}

oder

ul.menu:first-child {
color: red;
}

wählt auch alle li-elemente aus.

Ich freue mich, wenn mir jemand auf die Sprünge helfen kann, vielen Dank!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

noobie

Okay, die Selektoren sind wohl von der Sache her richtig. Ich verstehe jetzt, dass die folgenden ebenen mit gefärbt werden, weil sie inhalt eines listen-elements der ersten ebene sind. ich habs korrigiert.

Mein Ziel ist übrigens ein dropdown-fähiges menu für ein eigenes wordpress theme.

Da das menu ja von wordpress erstellt und eingebunden wird, frag ich vielleicht an dieser stelle mal, was da der richtige ansatz ist? In den tutorials für Dropdown-menus finde ich hauptsächlich ansätze, die nur mit div-elemente, aber nicht mit Listen arbeiten, wie wordpress sie automtisch als menu erstellt.

bei der darstellung von listen über mehrere ebenen hab ich jetzt halt probleme. es soll in der desktop-ansicht erstmal ein container mit einer zeile (also erste menu-ebene mit display: inline) werden. Beim hover sollen dann entsprechend die unteren ebenen aufklappen.

b3317133

Ein Workaround bzgl. der Farben ware sowas in der Art:

Code

/* level 1 */
nav ul li {
  color: green;
}
/* level 2 */
nav ul li ul li {
  color: red;
}
/* level 2 */
nav ul li ul li ul li {
  color: blue;
}

Alles anzeigen

b3317133

Zitat von noobie

... für ein eigenes wordpress theme.
.. die nur mit div-elemente, aber nicht mit Listen arbeiten, wie wordpress sie automtisch als menu erstellt.

Wenn Du ein eigenes Theme erstellst, kannst Du beliebige Elemente im Menü verwenden, siehe Dokumentation wp_nav_menu() zu
[FONT=Courier New]items_wrap[/FONT] usw.

noobie

Vielen Dank!

Da ich der Theme-Nutzung ja vorher nciht weiß, wie die verschachtelung später mal irgendwo aussieht, kann ich da natürlich im css keine so starren Muster hinterlegen, denk ich mal.

die doku zu der wp_nav_menu(9 schau ich mir in jedem Falle an! Aber es kommt ja aufs gleiche raus, wenn ich statt der Listen div-elemente verwende.

Ich muss mir wohl nen kopf machen, wie ich mit javascript die verschachtelung auslese und dann zB beim hovern eines Elements über das zuweisen von klassen mit entsprechender css-verknüpfung die nächste ebene sichtbar mache.

Korrier mich bitte, wenn es einen besseren Weg gibt. Naja. Bin halt Anfänger :)

Aber vielen Dank erstmal!!!

SirEctor

Code

ul.menu > li

wählt z. B. die li, die direkt unter der ul mit der Class menu liegen.

Mit

Code

ul.menu > li > ul.sub-menu > li

wählst du das erste li der ersten sub-menu Ebene. Ich hoffe du verstehst das Prinzip.

So wie du es gemacht hast

Code

ul > li {
color: green;
}

wählst du von jeder ul die erste li-Ebene. Das sind dann aber alle li.

Das sind Grundlagen von CSS und hat wenig mit WordPress speziell zu tun.

noobie

Hey, vielen Dank! Bin dabei mich damit zu beschäftigen. Natürlich weiß ich, dass das nicht unmittelbar etwas mit WP zu tun hat. Hatte gehofft, dass die Frage hier in der Design-Abteilung trotzdem okay wäre. Ich verstehe aber deinen Einwand und werde bei weiteren Fragen ein anderes Forum für dieses Thema suchen. Vielen Dank für deine Hilfe!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

CSS Kind-Selektoren

Jetzt mitmachen!