div:first-of-type {
color: red;
}
<div class="a">
<p>huba</p>
<p>huba2</p>
</div>
<div class="b">
<p>huba3</p>
</div>
<div>
<p>huba4</p>
</div> p:first-child {
color: red;
}
Lässt sich schon aus dem codepen entnehmen, dass dem nicht so istdarkR schrieb:
Nein, weil first-child hier gar nicht das Problem ist.CooperakaTigger schrieb:
<div> ist ein Block-Level Element, kein Inline-Element.<div> jeweils ein <span>, das ist der Inline-Gegenpart zum <div> (in dem Sinne, dass es keine semantische Bedeutung hat).
<div> das erste <div>-Child (nämlich vom <body>) ist. Und das ändert auch nichts daran, dass ein <div> innerhalb eines <p> unzulässig ist.Um die Frage übrigens noch zu beantworten: Nein, die Selektoren betreffen nur "echte" DOM-Elemente, keine virtuellen Nodes und auch keine Pseudo-Elemente.Hendoul schrieb:
darkR schrieb:
div-Tags innerhalb von p-Tags niemals nicht nie erlaubt sind.span, vielleicht hilft dir das in deiner Sache.
div:first-child, denn der matcht immer schon das erste div im <body> (bzw. <html>, wenn man <body> weglässt).<div>, sollen aber trotzdem gefärbt werden. So oder so funktioniert der Vorschlag nicht.<div class="a">
<div>huba</div>
<div>huba2</div>
</div>
<div class="b">
<div>huba3</div>
</div>
<div>
<div>huba4</div>
</div><div class="a"> ist das first-child vom <body>, die Farbe wird einfach nur vererbt. Das siehst du auch im Inspector:<div class="a">
<div>huba</div>
<div>huba2</div>
</div>
<div class="b">
<div>huba3</div>
<div>huba3a</div>
</div>
<div>
<div>huba4</div>
</div>
div > div:first-child {
color: blue;
}<div class="a"> <!-- first child of body UND div, daher TRUE -->
<div>huba</div> <!-- first child of div, daher TRUE, außerdem wird rot vom 1st level vererbt -->
<div>huba2</div> <!-- second child of div, daher FALSE, ABER es wird rot vom 1st level vererbt -->
</div>
<div class="b"> <!-- second child of body, daher FALSE -->
<div>huba3</div> <!-- first child of div, daher TRUE -->
</div>
<div> <!-- third child of body, daher FALSE -->
<div>huba4</div> <!-- first child of div, daher TRUE -->
</div>
