• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

pseudoelement :first-child

Zejo

Mitglied
Hallo,

mir ist heute etwas komisches aufgefallen bei dem Pseudoelement ":first-child". Sobald ein Element davor ist, funktioniert das Ganze nicht mehr.

Hier mein Beispiel:

Code:
<html>
<head>

<style type="text/css">

header p:first-child {
  background-color: blue;
}

</style>
</head>
<body>
<header>
<h1>Überschrift 1</h1>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
<p>Absatz</p>
</header>
</body>
</html>

Der erste Absatz wird nicht blau, weil noch ein <h1> Tag davorgeschaltet ist, das kann doch aber eigentlich nicht das Problem sein, dachte das Pseudoelement schaut nach dem ersten angegebenen Kind in einem umschließenden Tag (hier header und p). Aber Pustekuchen.

Weiß jemand, warum das so ist. Wenn ich die <h1> rausnehmen, geht es.
 
Zuletzt bearbeitet:
Leider falsch gedacht, "header p:first-child" heißt nicht "Das erste <p> in <header>" sondern "Das erste Kind des <header>, wenn es ein <p> ist"
 
Zurück
Oben