CSS, mehrer Class < &

[Christian001]

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.

    <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">&nbsp;</a>
    </nav>

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

nav>ul

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

[Fehrmann]

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

<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.

[mlweb]

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.

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

    <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.

nav>ul

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

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.

[mlweb]

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?

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

Das habe ich gar nicht als Code identifiziert .

[tab]

Da fehlen wohl wirklich so einige Basics

Das habe ich gar nicht als Code identifiziert

LOL

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.