CSS: Korrekte Verschachtelung

Salvi

Hallöchen,

ich pauke aktuell ein wenig das Webdesign mit Hilfe eines Rheinwerke-Videotrainings. Hier wird aktuell ein Submenü gebaut, welches aufgeklappt wird, sobald man mit der Maus über einen Menüpunkt fährt. Die dort hinterlegten a-Elemente sollen mit text-align links ausgerichtet werden, soweit alles klar. Gemacht wird dies folgendermaßen:

header nav ul li ul {
display: none;
background-color: #0a0c0d;
position: absolute;
top: 111px;
text-align: left;
box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

Verstehe ich soweit auch. Im Header-Element befindet sich ein Nav-Element, welches ein ul-Element und mehrere li-Elemente beinhaltet (das Hauptmenü eben). Innerhalb dieses Hauptmenüs gibt es nun ein weiteres ul-Element, welches für das Submenü zuständig ist und dieses wird nun links zentriert.

WIESO werden aber nicht gleich die dort enthaltenen li Elemente angesprochen sondern die ul, beispielsweise so:

header nav ul li ul li {
display: block;
padding: 2px 8px;
HIER das text-align:left;
}

? Ich habe zum Testen das text-align oben beim ul-Element entfernt und es unten bei den li-Elementen des Submenüs (wie oben gezeigt) eingefügt, mit der gleichen Wirkung. Ist es in solchen Fällen egal, wo man das text-align setzt oder gibt es einen tieferen Grund, wieso der Trainer dies explizit bei der ul und nicht dessen li-Elementen einfügt?

Danke im Voraus und Gruß

Arne Drews

Hallo,

Du musst Dir das DOM ( DocumentObjectModel ) als Pfad vorstellen.

Ein Beispiel

HTML

<header>
    <nav>
        <ul>
            <li><a href="">1</a>
                <ul>
                    <li><a href="">1.1</a></li>
                    <li><a href="">1.2</a></li>
                </ul>
            </li>
            <li><a href="">2</a>
                <ul>
                    <li><a href="">2.1</a></li>
                    <li><a href="">2.2</a></li>
                </ul>
            </li>
            <li><a href="">3</a>
                <ul>
                    <li><a href="">3.1</a></li>
                    <li><a href="">3.2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header

Alles anzeigen

Die Einrückung verrät eigentlich schon das ganze Geheimnis.
Du wanderst mit jeder Elementangabe eine Ebene weiter rein:

Code

/* selektiert alle ul-tags, egal auf welcher ebene */
ul
header ul
header nav ul


/* selektiert ausschliesslich die ul-tags auf 5. ebene, da die auf 3. ebene keinen li-parent haben! */
li ul
header li ul
header ul li ul
header nav li ul
header nav ul li ul

Alles anzeigen

Wenn Du expliziter arbeiten willst, nutzt Du den > Operator:

Code

ul > ul

würde bspw. nichts selektieren, weil im DOM kein ul unmittelbares Child-Element von einem ul ist!

Code

li > ul

hingegen selektiert die ul-Tags der 5. Ebene, weil es die einzigen sind, die unmittelbare Child-Element eines li-Tags sind!

Gruß Arne

Tags

Benutzer online in diesem Thema