Frage von Chris26997, 41

Was bedeutet "div#memory_board > div" und "div > img" in dem Quellcode?

Hier der Quellcode mit bildern ist ein memory spiel (der code wurde schon leicht von mir bearbeitet) https://www.dropbox.com/sh/s7nfxclsfrn8efe/AACXiuTSBg34p3RbYY17_zHsa?dl=0

Antwort
von Sarkophator, 9

Das sind die CSS Child-Selektoren. "div#memory_board > div" bedeutet, dass jedes div-Element dass ein div#memory_board-Element als direktes Elternelement hat von dem Selektor gematcht wird. Bei "div > img" bedeutet es dementsprechend also dass jedes img-Element welches sich in einem div-Element befindet gematcht wird.

Zu Beachten ist, dass nur eine Ebene tiefer gesucht wird. D.h. wenn du folgenden Code hast:

<style>
#mainlist > li { font-weight: bold; }
</style>
<!-- ... -->
<ul id="mainlist">
<li>Listeneintrag</li>
<ul>
<li>Verschachtelter Listeneintrag</li>
</ul>
</ul>

Dann wird nur der Text des li-Elements aus der ersten Ebene fett markiert. (<li>Listeneintrag</li>) Der verschachtelte Listeneintrag ist davon also nicht betroffen.

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Um auch verschachtelte Elemente zu matchen muss man Descendant-Selektoren verwenden:

#mainlist li { font-weight: bold;}

https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors

Antwort
von MegaCornan, 14

In was für einem Quellcode?

Kommentar von Chris26997 ,

bist du blind ? ^^

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten