PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Was macht das > in einer CSS Datei?


Gast
2013-04-14, 19:46:36
Worin liegt der Unterschied zwischen:

p > em {color: red}


und


p em {color: green}



Wenn ich das im Browser teste, dann ergibt das keinen Unterschied.

Gast
2013-04-14, 19:51:27
Okay, jetzt geht's.
Hab's verstanden.

Inquisitor
2013-04-15, 11:31:33
Wenn man eine Lösung selbst findet, wäre es hilfreich, diese kurz zu erläutern, um anderen, welche bei der Suche darauf stoßen, ebenfalls zu helfen.

Ich linke hier mal eine gefundene Erklärung:
http://www.css-cafe.de/art_kombinator.php

Nachfahren-Kombinator

E F an F element descendant of an E element Descendant combinator 1

Hier werden alle Kinder und Kindeskinder (Nachfahren) eines Elements ausgewählt.

Ein klassisches Beispiel wäre #menue a {...}, in dem also alle Links innerhalb eines Menü-Containers angesprochen werden.

Möchte man nun Links in einem anderen Bereich wie zum Beispiel einem Teaser gesondert auszeichnen, kann man dies mit .teaser a {...} erreichen, ohne eine Klasse zu vergeben.


Kind-Kombinator

E > F an F element child of an E element Child combinator 2

Dieser Kombinator beschreibt eine direkte Eltern-Kind-Beziehung. Die Anweisung body > p beträfe also nur Absätze, die unmittelbar auf body folgen, nicht aber Absätze, die in weiteren definierten Containern enthalten sind.
<body>
<p>...</p>
<div id="content">
<p>...</p>
</div>
<p>...</p>
Der Absatz innerhalb des Containers mit der ID #content wird von der Anweisung body > p nicht erfasst.