Mit dem :first-childSelektor können Sie das erste Element unmittelbar in einem anderen Element anvisieren. Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, dh es wird verwendet, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterinhalten zu formatieren.
Angenommen, wir haben einen Artikel und möchten den ersten Absatz vergrößern - wie eine „Lede“ oder einen einleitenden Text:
First paragraph…
Lorem ipsum…
Dolor sit amet…
Consectetur adipisicing…
Anstatt ihm eine Klasse zu geben (z. B. .first), können wir ihn :first-childauswählen:
p:first-child ( font-size: 1.5em; )Die Verwendung :first-childist sehr ähnlich, :first-of-typeaber mit einem entscheidenden Unterschied: Sie ist weniger spezifisch. :first-childwird nur versuchen, das unmittelbare erste untergeordnete Element eines übergeordneten Elements abzugleichen, während first-of-typedas erste Vorkommen eines angegebenen Elements übereinstimmt, auch wenn es im HTML nicht unbedingt an erster Stelle steht. Im obigen Beispiel wäre das Ergebnis dasselbe, nur weil das erste Kind von articleauch zufällig das erste pElement ist. Dies zeigt die Kraft von :first-child: Es kann ein Element in Bezug auf alle seine Geschwister identifizieren, nicht nur Geschwister des gleichen Typs.
Das ausführlichere Beispiel unten zeigt die Verwendung :first-childeines verwandten Pseudoklassen-Selektors :last-child.
Browser-Unterstützung
| Chrom | Safari | Feuerfuchs | Oper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Irgendein | 3.2+ | Irgendein | 9,5+ | 9+ | Irgendein | Irgendein |
:first-childwurde in CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Versionen von Browsern dies nicht unterstützen. Die moderne Browserunterstützung ist jedoch einwandfrei, und die neuen Pseudoselektoren werden häufig in Produktionsumgebungen verwendet. Wenn Sie ältere Browserunterstützung benötigen, entweder Polyfill für IE, oder verwenden Sie diese Selektoren auf unkritische Weise á la progressive Verbesserung, was empfohlen wird.