Sonstiges CSS, mehrer Class

CSS, mehrer Class < &

Hallo liebe Community,

CSS habe ich eher bei Learning by doing gelernt.
Durch meine Suche von CSS und HTML sind mir ein paar Fragen hängen geblieben, auf die ich keine Antwort im Web bzw. Google gefunden haben.

Heißt es bei diesen Code das die Liste mehrer Klassen zugewiesen wurden.
> mod_navigation
> nav
> nav--main
> nav--flex
> block
D.h. Ich kann Klasse mit mod_navigation oder mit nav oder mit nav--main - Es hat immer Auswirkung auf den gesamten Code unterhalb.

Code:

<nav class="mod_navigation nav nav--main nav--flex block"> <ul class="level_1" role="menubar"> <li class="sibling first"> <a href="#" title="" class="sibling first" role="menuitem">wer wir sind</a> </li> <li class="sibling"> <a href="#" title="" class="sibling" role="menuitem">was wir bieten</a> </li> <li class="sibling last"> <a href="#" title="" class="sibling last" role="menuitem">wie wir vorgehen</a> </li> </ul> <a id="skipNavigation1" class="invisible"> </a> </nav>

Was bedeutet genau diese Zeichenfolge bzw was ist der Unterschied zwischen diesen beiden:

Code:

nav>ul

Code:

nav ul

Manchmal habe ich auch in den CSS-Codes das Zeichen & gesehen - Heißt das das die mehrer Codes zusammengehängt wurden. (Habe jetzt leider kein Beispiel).

Ich hoffe ich habe mich verständlich ausgedrückt.

Danke

Der Unterschied zwischen "nav > ul" und "nav ul" ist folgender: Ersteres wirkt sich auf alle direkten Kindelemente von "nav" aus. Bei dem Zweiten könnten die Liste (ul) auch tiefer verschachtelt sein, zB

HTML-Code:

<nav class="ebene_1"> <div class="ebene_2"> <ul> … </ul> </div> </nav>

Der erste Selektor bewirkt nichts, da ul kein direktes Kindelement ist. Der zweite Selektor wirkt aber.

Dein oberer Code sieht irgendwie nicht korrekt aus. Da scheint irgendwas zu fehlen.

CSS-Selektoren für Klassen beginnen immer mit ".". Wenn mehrere CSS-Selektoren die gleichen Eigenschaften erhalten sollen, dann werden diese per Komma getrennt.

Zitat:

Zitat von Christian001

auf die ich keine Antwort im Web bzw. Google gefunden haben.

Dass man bei der Googlesuche auf Deine Fragen keine Antwort findet halte ich für ein Gerücht.

Zitat:

Zitat von Christian001

Heißt es bei diesen Code das die Liste mehrer Klassen zugewiesen wurden.

Code:

<nav class="mod_navigation nav nav--main nav--flex block"> ... </nav>

D.h. Ich kann Klasse mit mod_navigation oder mit nav oder mit nav--main - Es hat immer Auswirkung auf den gesamten Code unterhalb.

Ja das sind mehrere Klassen für ein Element. Was sich genau wie auswirkt hängt aber von verschiedenen Faktoren ab. Stichworte sind Reihenfolge im code und Spezifität. Außerdem ist nicht alles sinnvoll was funktioniert. Z.B. gilt alles was Du für mod_navigation einträgst für jede Navigation. Das kann gewünscht sein, muss aber nicht.

Zitat:

Zitat von Christian001

Code:

nav>ul

Code:

nav ul

https://www.mediaevent.de/css/css-se...tselektor.html um mal eine Internetquelle für die Erklärung solcher Zusammenhänge aufzuführen. Davon gibt es unzählige mit mehr oder weniger vollständigen bzw. guten Erklärungen

Zitat:

Zitat von Christian001

Manchmal habe ich auch in den CSS-Codes das Zeichen & gesehen

Das dürfte Dir eigentlich nur in Preprozessoren (Less oder Sass) untergekommen sein. Um Preprozessoren zu verwenden sollte man m.E. aber erst einmal die Grundlagen von css kennen.

Zitat:

Zitat von Fehrmann

Dein oberer Code sieht irgendwie nicht korrekt aus. Da scheint irgendwas zu fehlen.

CSS-Selektoren für Klassen beginnen immer mit ".". Wenn mehrere CSS-Selektoren die gleichen Eigenschaften erhalten sollen, dann werden diese per Komma getrennt.

Meinst Du dieses Kauderwelsch?

Zitat:

Zitat von Christian001

> mod_navigation
> nav
> nav--main
> nav--flex
> block

Das habe ich gar nicht als Code identifiziert :eek:.

Da fehlen wohl wirklich so einige Basics

Zitat:

Das habe ich gar nicht als Code identifiziert

LOL :D

Da fehlen dem Christian wohl schon einige Basics. Erklärt ist es ja jetzt.
Ohne Link hat meine Glaskugel Probleme, obwohl ich ganz verschwommen sowas wie
https://themes.contao.org/de/themes/...navigator.html
erkennen konnte. Da gibts auch eine Live-Demo dazu, aber im Moment scheint contao.org ein Problem zu haben, Error 522.