CSS: Leserichtung / Abarbeitung von verketteten Klassen, Elementen, IDs

    Ok, der Titel hört sich doof an, fiel aber nichts Besseres ein. Es geht um etwas wie

    #content p {color:red;}

    Wie genau arbeitet der Parser da denn nun, also von "links nach rechts" oder von "rechts nach links"? Ich habe schon so viele Dokumentationen gelesen, aber irgendwie ist sich keiner einig. 50% sagen so, die anderen 50% so. Eben wieder einen per Zufall gefunden, suchte eigentlich was anderes, recht neu, 4 Monate alt, der sagt wieder von links nach rechts.

    Also, bei der winzigen Anweisung oben, was macht der Parser dann?

    a) sucht der alle P im DOM und prüft dann für jedes P, ob es ein Elternelement mit der ID "content" hat?

    oder

    b) sucht er zuerst nach der ID "content" im DOM und darin dann nach vorhandenen P?

    Weiß das einer und hat vielleicht auch eine verlässliche Quelle?

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(

    Ich kenne es nur so, dass der CSS parser im browser die regeln von rechts nach links liest - soweit ich mich erinnere hatte das praktische oder performance gruende, und das ergibt sich daraus wie der DOM intern im browser organisiert wird. Das hatte ich imho vor vielen jahren mal auf csstricks oder so gelesen, aber ehrlich gesagt nie hinterfragt.

    Grund koennte vielleicht sein dass es einfacher ist von unten nach oben den parent eines elementes zu finden (davon kann es nur einen geben), statt von oben nach unten alle child-elemente (und alle deren child-elemente...) rekursiv zu durchsuchen, da jedes element auch schnell mal tausend oder mehr child-elemente haben kann.

    Von links nach rechts macht es jQuery: also erst wird #content gefunden, und dann darin nach allen p gesucht.

    Genau, das ist das Problem an der Sache, es ist Performance. So kam ich da auch gestern wieder zufällig auf den Artikel, suchte aber eigentlich was anderes.

    Das Beispiel mit Javascript ist gut und da ist es in der Tat links nach rechts. Da suche ich z.B. auch erst nach "#uklist" und darin dann nach "a", denn ich brauche nur die "a" da drinnen und nicht alle auf der Seite.

    CSS ist eben verwirrend, daher die Frage. CSSTricks, Kulturbanause und noch etliche andere. Alles schön beschrieben, aber jeder sagt was anderes.

    Ich für meinen Fall ging eigentlich auch von links nach rechts aus, daher sind meine Rules auch so aufgebaut "#content li a" oder eben "#navi li a" in der Hoffnung, dass der dann als erstes den entsprechenden Bereich sucht. Also erst "#content", dann, wenn gefunden, in dem Bereich dann. alle "li" und darin eben die "a". So wie jQuery eben.

    Aber wenn das nun von rechts nach links geht, dann ist das ja so Mist. Dann müsste der ja erst ALLE "a" im DOM suchen, in der Ergebnismenge dann schauen, ob da ein Elternelement "li" vorkommt und dann auch noch, ob es in "#content" ist. Ist es dann z.B. nicht in "#content", sondern in "#footer", dann wäre die Arbeit umsonst gewesen.

    und so was da wäre dann noch sinnloser: "#navi li a .nav1" Wenn das von rechts nach links geht, dann kann ich gleich einfach nur ".nav1" schreiben, denn die gibt es ja nur da ;)

    Aber ja, wenn ich mir dann so was wie Bootstrap ansehe, dann schaut das auch wieder nach von "rechts nach links" aus. Daher nehmen die wohl auch so verdammt viele einzelne Klassen.

    Interessant: https://stackoverflow.com/questions/5797…5813672#5813672

    Der sagt auch rechts nach links, aber auch, dass bei kleinen Seiten eigentlich links nach rechts besser wäre. Erklärt aber dennoch ganz gut, warum es denndoch rechts nach links ist.

    Wenn ein Mensch nicht um dich kämpft, hat er nur gewartet, dass du gehst. ;(