CSS :first-child Pseudo-Klasse
Die :first-child CSS-Pseudo-Klasse gestaltet das erste Kindelement. Syntax, Fallstricke und ausführbare Beispiele.
Die CSS-Pseudo-Klasse :first-child trifft auf ein Element zu, das das erste Kindelement seines Elternelements ist. Sie wird am häufigsten verwendet, um das erste Element einer Liste, den ersten Absatz eines Abschnitts zu gestalten oder den oberen Rand/Rahmen des ersten Elements in einer Gruppe zu entfernen.
Diese Seite behandelt die Syntax, die eine Regel, über die die meisten stolpern, mehrere ausführbare Beispiele und den Unterschied zwischen :first-child und seinen nächsten Verwandten.
Der Fallstrick: „erstes Kind" ist nicht „erstes von diesem Typ"
Ein Selektor wie p:first-child bedeutet nicht „das erste <p> innerhalb des Elternelements". Er bedeutet „ein <p>, das zufällig auch das allererste Kindelement seines Elternelements ist". Wenn ein anderes Element vor dem Absatz steht, trifft die Regel auf nichts zu.
<div>
<h2>Heading</h2>
<p>This paragraph is NOT styled — the <h2> is the first child.</p>
</div>
<div>
<p>This paragraph IS styled — it is the first child of its <div>.</p>
</div>p:first-child liest sich von rechts nach links als: Wähle <p> aus, aber nur wenn dieses <p> das erste Kindelement seines Elternelements ist. Wenn Sie „den ersten Absatz unabhängig davon, was davor kommt" möchten, verwenden Sie stattdessen :first-of-type.
:first-child im Vergleich zu verwandten Selektoren
| Selektor | Trifft zu auf |
|---|---|
:first-child | Ein Element, das das erste Kindelement seines Elternelements ist |
:last-child | Ein Element, das das letzte Kindelement seines Elternelements ist |
:first-of-type | Das erste Element seines Typs unter seinen Geschwisterelementen |
:only-child | Ein Element, das das einzige Kindelement seines Elternelements ist |
:nth-child(n) | Das n-te Kindelement nach einer beliebigen Formel (2n, 3n+1 usw.) |
:first-child ist äquivalent zu :nth-child(1). Der wesentliche Unterschied zu :first-of-type liegt in der Bedingung: :first-child greift nur, wenn das Element das erste Kindelement seines Elternelements ist, während :first-of-type das erste Element seines spezifischen Typs unter seinen Geschwisterelementen trifft – unabhängig davon, was davor steht.
Version
Syntax
CSS :first-child Syntax-Beispiel
:first-child {
css declarations;
}Beispiele
Mit dem <p>-Tag
Hier ist das erste <p> das erste Kindelement von <body>, daher wird es gestaltet. Das zweite <p> folgt einem <h2>, daher wird es nicht gestaltet.
CSS :first-child Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-child {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<h2>First-child selector example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Mit dem <li>-Tag
li:first-child hebt das erste Element in jeder Liste hervor. Da sowohl <ul> als auch <ol> den Kinderzähler zurücksetzen, erhält das erste <li> beider Listen den Hintergrund.
CSS :first-child weiteres Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Mit dem <ol>-Tag
Zwei <ol>-Elemente stehen nebeneinander in <body>. Nur das erste ist das erste Kindelement von <body>, daher erhält nur es den Hintergrund.
Beispiel des :first-child-Selektors mit dem HTML-ol-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ol:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
</body>
</html>Mit dem <em>-Tag
p em:first-child trifft ein <em> nur dann, wenn es das erste Kindelement eines <p> ist. In jedem der folgenden Absätze folgt das erste <em> auf die Wörter „Here is a", ist also nicht das erste Kindelement – die Regel trifft auf nichts zu. Dies ist eine bewusste Veranschaulichung des oben beschriebenen Fallstricks.
Beispiel des :first-child-Selektors mit dem HTML-em-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p em:first-child {
background: #82b534;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<article>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
</article>
</body>
</html>Mit dem <ul>-Tag
:first-child funktioniert auf jeder Verschachtelungsebene. Das erste Element der äußeren Liste und das erste Element der verschachtelten Liste treffen beide auf ul li:first-child zu.
Beispiel des :first-child-Selektors mit dem HTML-ul-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
color: blue;
}
ul li:first-child {
color: #8ebf42;
font-weight: bold;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Browser-Unterstützung
:first-child wird in jedem modernen Browser unterstützt und funktioniert ab Internet Explorer 9. Es ist Teil von CSS Level 2 und blieb durch Selectors Level 3 und Level 4 unverändert, sodass Sie es ohne Vendor-Präfixe verwenden können.
Verwandte Selektoren
:last-child— das letzte Element einer Gruppe gestalten:first-of-type— das erste Element eines bestimmten Typs, unabhängig davon, was davor steht:only-child— ein Element auswählen, das keine Geschwisterelemente hat:nth-child()— nach Position mit einer Formel auswählen (:first-childentspricht:nth-child(1))