DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der Selektor :first-child ermöglicht es Ihnen, das erste Element direkt innerhalb eines anderen Elements anzusprechen. Er ist in der CSS Selectors Level 3 Spezifikation als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und geschwisterlichen Inhalten zu stylen.
Angenommen, wir haben einen Artikel und möchten den ersten Absatz größer machen – wie einen „Leitartikel“ oder ein einleitendes Textstück.
<article>
<p>First paragraph...</p>
<p>Lorem ipsum...</p>
<p>Dolor sit amet...</p>
<p>Consectetur adipisicing...</p>
</article>Anstatt ihm eine Klasse zu geben (z. B. .first), können wir :first-child verwenden, um ihn auszuwählen.
p:first-child {
font-size: 1.5em;
}Die Verwendung von :first-child ist :first-of-type sehr ähnlich, aber mit einem entscheidenden Unterschied: Es ist weniger spezifisch. :first-child versucht nur, das unmittelbar erste Kind eines Elternelements abzugleichen, während first-of-type das erste Vorkommen eines bestimmten Elements abgleicht, auch wenn es nicht absolut zuerst im HTML steht. Im obigen Beispiel wäre das Ergebnis dasselbe, nur weil das erste Kind des article zufällig auch das erste p-Element ist. Dies offenbart die Kraft von :first-child: Es kann ein Element in Bezug auf alle seine Geschwister identifizieren, nicht nur Geschwister desselben Typs.
Das vollständigeres Beispiel unten zeigt die Verwendung von :first-child und einer verwandten Pseudoklassen-Selektoren, :last-child.
Weitere Ressourcen
- Verwandt mit: last-child, first-of-type, :last-of-type
- Mozilla Docs
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3.2+ | Alle | 9.5+ | 9+ | Alle | Alle |
:first-child wurde im CSS Selectors Module 3 eingeführt, was bedeutet, dass alte Browserversionen es nicht unterstützen. Die Unterstützung moderner Browser ist jedoch tadellos, und die neuen Pseudoselektoren werden in Produktionsumgebungen häufig eingesetzt. Wenn Sie ältere Browserunterstützung benötigen, verwenden Sie entweder ein Polyfill für IE oder verwenden Sie diese Selektoren auf nicht-kritische Weise im Sinne von Progressive Enhancement, was empfohlen wird.
Hallo.
:first-child funktioniert in IE 7+* und wurde in CSS2** eingeführt.
Sie beziehen sich wahrscheinlich auf fortgeschrittene Selektoren*** in CSS3 wie :first-of-type.
http://caniuse.com/css-sel2
** http://www.w3.org/TR/CSS2/selector.html#first-child
*** http://caniuse.com/css-sel3
—
Mitică
In der Tat!
Wie wäre es, die Informationen zu aktualisieren?
Danke
Hallo,
Tolles Tutorial, danke.
Ich habe ein Problem bezüglich des obigen Codes, dieses CSS funktioniert nicht in Chrome (ich habe es noch nicht in anderen Browsern überprüft).
Außerdem hatte ich eine Frage, wenn die HTML-Elemente so aussehen:
Wie kann ich nur das erste div.sticky stylen?
Mit freundlichen Grüßen,
Wirka
Wie wäre es mit nth-child? Sie können den Elementtyp und seine Position in Bezug auf seine Geschwister innerhalb des Geltungsbereichs des Elternelements angeben. So:
article div:nth-child(2)Dies spricht das zweite div an (nicht das zweite Kind) innerhalb des
article-Tags. Siehe Chris' großartigen Artikel über nth-child für einige clevere Lösungen für scheinbar komplizierte Elementauswahlen.-Chris
Ich empfehle Ihnen Folgendes zu tun:
article div.sticky:first-childAuf diese Weise machen Sie deutlich, dass Sie das erste
divmit der Klassestickywünschen. Wenn Sie später ein weiteresdivhinzufügen, könnten Sie Probleme bekommen, wenn Sie die Antwort von Chris Hardwick verwenden. Es ist keine schlechte Antwort, verstehen Sie mich nicht falsch.Ich hatte Probleme mit first-child, als ich es mit einem Tag verwendete, aber ich entdeckte die Pseudoklasse first-of-type. Vielen Dank :)
`article.mapa{
display: inline-block;
width: 390px;
margin: 0px;
padding: 0px;
}
article.mapa:first-of-type{margin-right:16px;}
Ich bin mir nicht sicher, wer diesen speziellen Artikel geschrieben hat, aber die Browserinformationen sind völlig falsch. :first-child wurde in CSS2 eingeführt und funktioniert in IE7+. http://www.w3schools.com/cssref/sel_firstchild.asp. Dieser Beitrag ist ein paar Jahre alt, also hoffentlich wird er bald aktualisiert, um die Leser nicht fehl zu informieren.
Der Name des Autors steht oben im Artikel, zusammen mit dem Veröffentlichungsdatum.
Hallo Chris,
Dies wird in IE7 unterstützt. Sie listen es als 9+. Ich habe das gerade auch erst gelernt – dass :last-child nur in IE9+ unterstützt wird, aber :first-child in IE7+ unterstützt wird. Ich fand das eine großartige Information, auf die ich gestoßen bin.
http://www.w3schools.com/cssref/sel_firstchild.asp
Vielen Dank,
Justin
Haben Sie Gedanken dazu, warum Sie den *Typ* des Elements angeben müssen, das von :first-child angesprochen werden soll? Anders ausgedrückt, warum können wir nicht einfach sagen: div *:first-child, um jedes Element, eines nicht spezifizierten Typs, das das erste Element im div ist, zu bedeuten?
Sie müssen den Typ nicht angeben, lassen Sie den Stern weg und verwenden Sie es so:
div > :first-childHaben Sie eine Idee, wie man das erste Kind (das kein Element ist) eines nicht spezifizierten div anspricht? Wie dieser:
some text ..Ich möchte nur den Stil von „some text“ ändern.
Yep, das passiert