Was ist der Unterschied zwischen: erstem Kind und: erstem Typ?

124

Ich kann den Unterschied zwischen element:first-childund nicht erkennenelement:first-of-type

Sagen Sie zum Beispiel, Sie hatten eine Div

div:first-child
→ Alle <div>Elemente, die das erste Kind ihres Elternteils sind.

div:first-of-type
→ Alle <div>Elemente, die das erste <div>Element ihres übergeordneten Elements sind.

Dies scheint genau dasselbe zu sein, aber sie funktionieren unterschiedlich.

Könnte jemand bitte erklären?

BoltClock
quelle
Das erste Kind zielt nur auf das erste Kind des Elternteils ab, wobei das erste Kind auf das erste Kind dieses Typs
abzielt
Das erste 'div'-Kind könnte ein älteres Geschwister haben. first-of-type wählt ein solches div aus, da es das erste untergeordnete Element des Typs ist. first-child würde dieses div nicht auswählen, da es nicht das erste untergeordnete Element ist.
n8bar

Antworten:

207

Ein übergeordnetes Element kann ein oder mehrere untergeordnete Elemente haben:

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Unter diesen Kindern kann nur eines das erste sein. Dies entspricht :first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Der Unterschied zwischen :first-childund :first-of-typebesteht darin, dass :first-of-typees mit dem ersten Element seines Elementtyps übereinstimmt, das in HTML durch seinen Tag-Namen dargestellt wird, auch wenn dieses Element nicht das erste untergeordnete Element des übergeordneten Elements ist . Bisher waren die untergeordneten Elemente, die wir betrachten, alle divs, aber ertrage es mit mir, ich werde gleich darauf zurückkommen.

Im Moment gilt auch das Gegenteil: Jedes :first-childist auch :first-of-typenotwendig. Da das erste Kind hier auch das erste ist div, entspricht es sowohl den Pseudoklassen als auch der Typauswahl div:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

Wenn Sie nun den Typ des ersten Kindes von divetwas anderem ändern h1, ist es immer noch das erste Kind, aber es ist divoffensichtlich nicht mehr das erste . stattdessen wird es das erste (und einzige) h1. Wenn divdiesem ersten untergeordneten Element innerhalb desselben übergeordneten Elements weitere Elemente folgen, stimmt das erste dieser divElemente überein div:first-of-type. Im angegebenen Beispiel wird das zweite Kind das erste, divnachdem das erste Kind in Folgendes geändert wurde h1:

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Beachten Sie, dass dies :first-childäquivalent zu ist :nth-child(1).

Dies impliziert auch, dass jedes Element möglicherweise immer nur ein einzelnes untergeordnetes Element :first-childgleichzeitig hat, aber so viele untergeordnete Elemente haben kann und wird, die mit der :first-of-typePseudoklasse übereinstimmen, wie die Anzahl der Arten von untergeordneten Elementen . In unserem Beispiel entspricht der Selektor .parent > :first-of-type(mit einer impliziten *Qualifizierung des :first-of-typePseudos) zwei Elementen, nicht nur einem:

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Gleiches gilt für :last-childund :last-of-type: jedes :last-childist notwendigerweise auch :last-of-type, da ihm absolut kein anderes Element innerhalb seines Elternteils folgt. Da das Letzte divauch das letzte Kind ist, h1kann das nicht das letzte Kind sein, obwohl es das letzte seiner Art ist.

:nth-child()und :nth-of-type()funktionieren im Prinzip sehr ähnlich, wenn sie mit einem beliebigen ganzzahligen Argument verwendet werden (wie im :nth-child(1)oben erwähnten Beispiel), aber wo sie sich unterscheiden, liegt in der möglichen Anzahl von Elementen, die mit übereinstimmen :nth-of-type(). Dies wird ausführlich in Was ist der Unterschied zwischen p: n-tem Kind (2) und p: n-tem Typ (2)?

BoltClock
quelle
4
Ich verstehe endlich. Wenn ich das erste div unter einem div-Element haben möchte, würde ich div: first-of-type nennen, da sich darüber möglicherweise nicht-div-Elemente befinden. Es war ein wenig verwirrend, aber ich verstehe jetzt. Dies ist ein ausgezeichneter und sehr informativer Beitrag. Vielen Dank und Ihre Hilfe wird sehr geschätzt.
1
Ich habe ein Beispiel basierend auf dieser Antwort erstellt: codepen.io/bigtinabang/pen/pmMPxO
Tina Chen
14

Ich habe ein Beispiel erstellt, um den Unterschied zwischen first-childund first-of-typehier zu demonstrieren .

HTML

<div class="parent">
  <p>Child</p>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div> 

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

Das vollständige Beispiel finden Sie unter https://jsfiddle.net/bwLvyf3k/1/.

Wen
quelle
0

Der Unterschied zwischen dem Typ des ersten Kindes und dem Typ des ersten Kindes kann anhand des Beispiels verstanden werden. Sie müssen das folgende von mir erstellte Beispiel verstehen und es funktioniert wirklich. Sie können die Codes in Ihren Editor einfügen. Sie werden verstehen, was sie sind und wie Sie arbeiten

Code Nr. 1 für First-of-Type:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

Ergebnis

.p1, .p2, .p3 werden gestylt und ihre Farbe wird rot. Auch wenn wir .p1 nach dem zweiten Div setzen, wird sie rot sein.

Code Nr. 2 für das erste Kind:

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

Ergebnis:

Wenn wir die .p2 nach der zweiten Div 2 setzen, wird sie nicht rot sein, aber im ersten Fall hat es funktioniert.

Alles löschen
quelle