Чим відрізняється: перша дитина від: перша дитина?

Я не можу сказати різницю між element:first-childтаelement:first-of-type

Наприклад, скажіть, у вас був дів

div:first-child
→ Усі <div>елементи, які є першою дитиною свого батька.

div:first-of-type
→ Усі <div>елементи, які є першим <div>елементом їхнього батьківського.

Це здається точно такою ж справою, але вони працюють по-різному.

Може хтось пояснить, будь ласка?

Батьківський елемент може мати один або більше дочірніх елементів:

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

Серед цих дітей першим може бути лише один із них. Це відповідає :first-child:

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

Різниця між :first-childі :first-of-typeполягає в тому, що :first-of-typeбуде відповідати першому елементу його типу елементів, який у HTML представлений його ім'ям тега, навіть якщо цей елемент не є першим дочірнім батьком . Поки що всі дочірні елементи, на які ми дивимось, вже були div, але потерпіть мене, я трохи доїду до цього.

На сьогодні зворотне також справедливо: будь- :first-childяке також є :first-of-typeнеобхідним. Оскільки перша дитина тут також є першою div, вона буде відповідати як псевдокласам, так і селектору типів div:

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

Тепер, якщо ви зміните тип першої дитини divна щось інше, наприклад h1, воно все одно буде першою дитиною, але divявно вже не буде першою ; натомість він стає першим (і єдиним)h1 . Якщо divза цим першим дочірньою частиною в тому ж батьківському середовищі є якісь інші елементи, то перший з них divбуде відповідати div:first-of-type. У наведеному прикладі друга дитина стає першою divпісля зміни першої дитини на 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>

Зауважте, що :first-childеквівалентно :nth-child(1).

Це також означає, що хоча будь-який елемент може одночасно мати лише один дочірній елемент :first-child, він може і матиме стільки дітей, які відповідають :first-of-typeпсевдокласу, скільки число дітей. У нашому прикладі селектор .parent > :first-of-type(з неявним* кваліфікацією :first-of-typeпсевдо) буде відповідати двом елементам, а не лише одному:

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

Те саме стосується і :last-childта:last-of-type : будь-який :last-childє необхідним також :last-of-type, оскільки абсолютно жоден інший елемент не слідує за ним у своєму батьківському. Однак, оскільки остання divє також останньою дитиною, вона h1не може бути останньою дитиною, незважаючи на те, що вона була останньою.

:nth-child()і :nth-of-type()функціонують дуже аналогічно в принципі, коли вони використовуються з довільним цілим аргументом (як у :nth-child(1)згаданому вище прикладі), але там, де вони відрізняються, є потенційне число елементів, узгоджене з :nth-of-type(). Це детально висвітлено в чому різниця між p: nth-дитина (2) та p: nth-типу (2)?

Я створив приклад, щоб продемонструвати різницю між first-childі first-of-typeтут.

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;
}

Щоб переглянути повний приклад, відвідайте https://jsfiddle.net/bwLvyf3k/1/

Різницю між типом першої дитини та першою дитиною можна зрозуміти на прикладі. Вам потрібно зрозуміти створений мною приклад, який справді працює, і ви дійсно спрацюєте, ви можете вставити коди у свій редактор, ви зрозумієте, що вони є і як вони працюють

Код №1 для першого типу:

<!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>

результат

.p1, .p2, .p3 буде стилізовано, і їх колір буде червоним. Навіть якщо ми поставимо .p1 після другого ключа, він стане червоним.

Код №2 для першої дитини:

<!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>

результат:

якщо ми поставимо .p2 після другого div 2, він не буде червоним, проте в першому випадку він працював.