Verständnisfrage: CSS Selektoren für Elemente

  • Hallo


    Beim folgenden Beispiel von W3Schools verstehe ich ein paar Dinge nicht, vielleicht könnt ihr mich dabei unterstützen.

    Es geht um folgendes Beispiel: https://www.w3schools.com/css/…name=tryresponsive_styles


    Dazu habe ich zwei Fragen:


    1. Wieso funktioniert die Vererbung einiger Eigenschaften der Eltern-Elemente zu den Child-Elementen und einige nicht:

    Code
    1. .header {
    2. background-color: #9933cc;
    3. color: #ffffff;
    4. padding: 15px;
    5. }

    Diese Eigenschaften werden vom h1 Element übernommen (color: white etc.). Füge ich aber beispielsweise eine border-Eigenschaft hinzu, wie die folgende, dann wird diese vom h1 Element nicht übernommen.

    Code
    1. .header {
    2. background-color: #9933cc;
    3. color: #ffffff;
    4. padding: 15px;
    5. border: 1px solid black; /* DIESE EIGENSCHAFT WIRD VOM H1 ELEMENT NICHT ÜBERNOMMEN */
    6. }
    7. [...]
    8. <div class="header">
    9. <h1>Chania</h1>            /* WEISS ABER KEIN RAHMEN */
    10. </div>


    2. Wieso funktioniert die folgende Änderung nicht, dabei meine ich korrekt zu selektieren.


    Ich hoffe ihr könnt mir bei diesen Verständnisfragen helfen.


    Danke im Voraus.


    Gruss,

    Arber

  • Hey,


    HTML
    1. <div class="header">
    2. <h1>Chania</h1>
    3. </div>
    CSS
    1. .header {
    2. background-color: #9933cc;
    3. color: #ffffff;
    4. padding: 15px;
    5. border: 1px solid black;
    6. }

    1. Mit diesem CSS-Code sprichst du ja nur das div mit der class header an. Und sagst das der Inhalt von header die textfarbe weiß und ein innenabstand von 15pixel haben soll. Der border und die background color beschränkt sich dabei nur auf das div. Wenn du möchtest das auch h1 ein border hat, musst du h1 individuell ansprechen.



    HTML
    1. <div class="col-3"> /* Die class 'menu' hier entfernt */
    2. <ul class="menu">
    3. <li class="menu">The Flight</li>
    4. <li class="menu">The City</li>
    5. <li class="menu">The Island</li>
    6. <li class="menu">The Food</li>
    7. </ul>
    8. </div>
    CSS
    1. .menu ul { /* Dieser hat keinen Effekt mehr so. Entfernt man jedoch '.menu' dann funktioniert das wieder. */
    2. [...]
    3. }
    4. .menu li {
    5. [...]
    6. }

    2. Warum funktioniert dies nicht ? Schau dir mal den HTML-Aufbau an. Du gibst dem ul die classe menu und tust dann in css nicht dem ul die class menu geben sondern dem div welches aber die class col-3 hat. Bzw. schau mal was da als Kommentar in den /* */ steht.

    Beispiel wie es funktioniert:

    HTML
    1. <div class="col-3">
    2. <ul class="menu">
    3. <li class="menu">The Flight</li>
    4. <li class="menu">The City</li>
    5. <li class="menu">The Island</li>
    6. <li class="menu">The Food</li>
    7. </ul>
    8. </div>
    CSS
    1. .col-3 ul.menu {
    2. background-color: yellow;
    3. list-style-type: none;
    4. }
    5. .menu li {
    6. color: red;
    7. display: inline;
    8. }


    Gruß,

    Stef

  • Hallo Stef


    Besten Dank für die Erläuterung. Das hilft sehr, nur noch eine letzte Frage dazu:


    Das ".menu ul" funktioniert also nicht, weil nach einer ul gesucht wird, die innerhalb eines (Unter)Elements der Klasse "menu" ist. Wie folgt beispielsweise, würde es hingegen funktionieren: "ul.menu".


    Kann man also sagen, dass der Abstand angibt, dass nach Auffindung eines passenden Elements, die folgende Eingabe für dessen Childs gilt?


    .menu div find.me sucht nach:


    <element class="menu">
    <div>

    <viel_viele_unter_elemente>

    <find class="me">MATCH</find>

    </viel_viele_unter_elemente>
    </div>

    </element>

    Das erklärt dann, wieso die zweite Angabe wiederum funktionierte, ".menu li".


    Danke!


    Gruss,

    Arber

  • Hey,


    ja genau so ist.


    Weiters Beispiel:

    CSS
    1. header#kopfbereich{
    2. /*Damit sprichst du den header an mit der id kopfbereich*/
    3. }
    4. #kopfbereich section#kopf_abteil{
    5. /*Damit sprichst du das section an mit der id kopf_abteil welches innerhalb des header mit id #kopfbereich ist*/
    6. }
    7. /*usw........*/

    Gruß,

    Stef