CSS :first-of-type Pseudo-Klasse
Die CSS-Pseudo-Klasse :first-of-type wählt das erste Element seines Typs unter den Geschwisterelementen aus. Beispiele und Erklärung.
Die CSS-Pseudo-Klasse :first-of-type wählt ein Element aus, das das erste Element seines Typs unter seinen Geschwistern ist. Sie ist gleichwertig mit [:nth-of-type(1)](/learn-css/nth-of-type).
Der Selektor zählt Geschwister anhand ihres HTML-Tag-Namens, nicht anhand von Klasse, Attribut oder Rolle. Für jeden unterschiedlichen Elementtyp innerhalb eines Elternelements kann genau ein Element :first-of-type entsprechen — das erste Element dieses Tags. Das bedeutet, dass ein einzelnes Elternelement mehrere :first-of-type-Treffer gleichzeitig haben kann (eines pro Tag), was das Verhalten ist, das Menschen, die von :first-child kommen, am häufigsten überrascht.
:first-of-type vs :first-child
Der Selektor :first-of-type wird oft mit :first-child verglichen, unterscheidet sich jedoch im Geltungsbereich. Während :first-child ein Element nur dann trifft, wenn es das allererste Kind seines Elternelements ist (unabhängig vom Typ), trifft :first-of-type das erste Geschwisterelement eines bestimmten Typs, auch wenn andere Elemente davor stehen. Beide Selektoren haben dieselbe CSS-Spezifität.
Betrachten Sie dieses Markup:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>p:first-childtrifft nichts — das erste Kind ist<h2>, kein<p>.p:first-of-typetrifft das erste<p>("First paragraph"), da es das erste Absatz-Element unter seinen Geschwistern ist.
Verwenden Sie :first-of-type, wenn Sie „die erste Überschrift", „die erste Liste" oder „den ersten Absatz" innerhalb eines Containers unabhängig von den vorangehenden Tags ansprechen möchten. Greifen Sie auf :first-child nur zurück, wenn das Element buchstäblich das öffnende Kind sein muss.
Wann verwenden
Einige praktische Anwendungsmuster:
- Den Einleitungsabsatz eines Artikels formatieren, ohne dem Markup eine Klasse hinzuzufügen.
- Den oberen Rand oder die obere Rahmenlinie des ersten Elements einer wiederholten Komponente entfernen (z. B. die erste
<figure>in einer Galerie). - In Kombination mit
:last-of-typedie äußeren Ränder eines Stapels beschneiden oder mit:nth-of-type()eine andere Position als die erste ansprechen.
Enthält ein Elternelement nur ein Element eines Typs, ist dieses Element sowohl :first-of-type als auch :only-of-type.
Ab Selectors Level 4 benötigt das ausgewählte Element keinen übergeordneten Knoten im DOM, um zu treffen.
Version
Syntax
CSS :first-of-type Syntax
:first-of-type {
css declarations;
}Beispiel des :first-of-type Selektors:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Beispiel des :first-of-type Selektors mit dem <article> Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-of-type {
font-size: 22px;
color: #777777;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<h2>This is a title.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
</article>
</body>
</html>Beispiel des :first-of-type Selektors mit verschiedenen HTML-Tags:
Hier trifft article:first-of-type nur das erste <article>, sodass dessen dunkler Hintergrund nicht auf das zweite angewendet wird. Der Selektor ist auf Elternelement und Tag beschränkt, was ihn ideal zum Formatieren der ersten Instanz eines wiederholten Blocks macht.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 0;
}
article:first-of-type {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h2>:first-of-type selector example</h2>
<article>
<p>This is a first element!</p>
<p>This <em>nested 'em' is first</em>!</p>
<p>This <strong>nested 'strong' is first</strong>, but this <strong>nested 'strong' is last</strong>!</p>
<p>This <span>nested 'span' gets styled</span>!</p>
<q>This is a 'q' element!</q>
<p>This is a last element.</p>
</article>
<article>
<p>This is a second article.</p>
</article>
</body>
</html>Browser-Kompatibilität
| Browser | Version |
|---|---|
| Chrome | 1.0 |
| Firefox | 1.0 |
| Safari | 1.0 |
| Edge | 12.0 |
| Opera | 7.0 |
| IE | 9.0 |