Redirect - Operator '>' in css

    Hallo zusammen,


    ich muss mich wirklich entschuldigen, dass ich sehr simple Fragen stelle. Der Tatsache geschuldet, dass ich nicht weiß wie dieser Operator > in CSS heißt, macht es etwas schwer das im Web zu finden. Meine Frage ist recht einfach. Wo ist der Unterschied zwischen folgenden Deklarationen:



    Code
    .div > a {
  color: #c0ff3e;
}

.div a {
  color: #c0ff3e;
}


    Soweit ich das jetzt beurteile wird der erste Part mit dem > Operator nur angewendet wenn in einem div Kontainer direkt ein a Element enthalten ist. Folgt hingegen noch etwas anderes, dann wird das nicht berücksichtig. Ausgehend von der ersten Variante:



    Code
    <div><a href="foo">Test</a></div>                 <!-- Hier würde die Farbe des Links #c0ff3e sein -->
<div><h2><a href="foo">Test</a></h2></div>        <!-- Hier würde sich die Farbe nicht ändern -->


    Beim der zweiten Variante wäre es quasi egal wie viele zwischen Elemente noch kommen. Somit gehe ich davon aus, dass man mit dem > Operator direkt eine Hierarchie beschreiben kann und ohne ist es dann quasi willkürlich. Wenn ein <div> Element kommt und irgendwo in dem nachfolgenden Code ist ein <a> Element, wird das gefärbt. Eine kurze Bestätigung wäre sehr nett von den Profis :)

    Tobi

    Stichwort verschachtelter Selektor / Childselektor
    Wenn ich Deine Ausführungen verstanden habe, ist es genau das was Du geschrieben hast. Er greift bei allen Elementen, die direkter Nachfahre von einem entsprechenden Elternelement sind.
    Verknüpft einen Selektor mit Stylesheet-Angaben, wenn dieser in einem anderen Selektor direkt eine Ebene tiefer verwendet wird.

    http://www.css4you.de/wscss/css04.html#childselector

    Moin Tobi,


    ich hätte da Anmerkungen zu Deinem Code:
    Im CSS hast Du Klassen-Selektor und nicht Typ-Selektioren (der Punkt muss weg)


    Auch ist die Reihenfolge wichtig, da immer das letzte zutreffende CSS Anwendung findet.

    In Deinem Beispiel hat die Schrift die gleiche Farbe, aber hier würde man den Unterschied sehen.

    Code
    div a {
  color: red;
}
div > a {
  color: green;
}
    Code
    <div><a href="foo">Test</a></div>                 <!-- Hier würde die Farbe Grün -->
<div><h2><a href="foo">Test</a></h2></div>        <!-- Hier würde die Farbe Rot -->

    Bei den Selektoren in Deiner Reihenfolge wäre die Farbe IMMER rot.


    Christian

    Hallo Christian,


    danke für Deine Anmerkungen. Es handelte sich hier nur um eine Veranschaulichung ob ich das mit demSelektor auch richtig verstanden habe. Ist so also nicht bei mir umgesetzt bezüglich. Die Punkte hab ich also nicht und auch die Reihenfolge ist bei mir richtig.

    Nichtsdestotrotz danke für die Rückmeldung; bestätigt, dass ich es verstanden habe.

    Tobi