Arasındaki fark nedir: first-child ve: first-of-type?

Ben arasındaki farkı söyleyemem element:first-childveelement:first-of-type

Örneğin, bir div'iniz olduğunu varsayalım

div:first-child
→ <div>Ebeveynlerinin ilk çocuğu olan tüm unsurlar.

div:first-of-type
→ Ebeveynlerinin <div>ilk <div>unsuru olan tüm unsurlar .

Bu tamamen aynı şey gibi görünüyor, ancak farklı çalışıyorlar.

Biri açıklayabilir mi lütfen?

Bir ana öğenin bir veya daha fazla alt öğesi olabilir:

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

Bu çocuklardan sadece biri ilk olabilir. Bu şununla eşleşir :first-child:

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

Arasındaki fark :first-childve :first-of-typeyani :first-of-type, HTML onun etiketi adına temsil edilir onun öğe türü, ilk elemanını maç olacak o eleman ebeveynin ilk çocuğu olmasa bile . Şimdiye kadar baktığımız alt unsurların hepsi divs idi, ama bana katlanın, buna birazdan geleceğim.

Şimdilik, sohbet de doğrudur: herhangi :first-childbiri de :first-of-typezorunludur. Buradaki ilk çocuk aynı zamanda ilk olduğundan div, hem sözde sınıflarla hem de tür seçiciyle eşleşecektir div:

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

Şimdi, ilk çocuğun tipini divbaşka bir şeye değiştirirseniz, mesela h1, yine ilk çocuk olacak, ama artık ilk çocuk olmayacak div; bunun yerine, ilk (ve tek) olur h1. divAynı ebeveyn içinde bu ilk çocuğu izleyen başka öğeler varsa , bu divöğelerden ilki eşleşecektir div:first-of-type. Verilen örnekte, ikinci çocuk div, ilk çocuk şu şekilde değiştirildikten sonra birinci olur 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>

Bunun :first-childeşdeğer olduğunu unutmayın :nth-child(1).

Bu aynı zamanda, herhangi bir elemanın bir seferde sadece tek bir alt elemana sahip olabileceği anlamına gelirken :first-child, :first-of-typesözde-sınıfla eşleşen çocuk tiplerinin sayısı kadar çocuk sahibi olabilir ve olacaktır . Örneğimizde, seçici .parent > :first-of-type( sözde özelliği örtük olarak *nitelendiren :first-of-type) , yalnızca bir değil, iki öğe eşleşecektir :

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

Aynısı :last-childve için de geçerlidir :last-of-type: herhangi :last-childbiri zorunlu olarak da vardır :last-of-type, çünkü kesinlikle başka hiçbir unsur onun ebeveyni içinde onu takip etmez. Yine divde, son çocuk aynı zamanda son çocuk h1olduğu için türünün sonuncusu olmasına rağmen son çocuk olamaz.

:nth-child()ve :nth-of-type()rasgele bir tamsayı argümanıyla kullanıldığında ( :nth-child(1)yukarıda bahsedilen örnekte olduğu gibi) ilke olarak çok benzer şekilde işlev görür , ancak farklı oldukları yerde, eşleşen elemanların potansiyel sayısıdır :nth-of-type(). Bu, p: nth-child (2) ve p: nth-of-type (2) arasındaki fark nedir?

Buradaki first-childve arasındaki farkı göstermek için bir örnek oluşturdum 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;
}

Tam örneği görmek için lütfen https://jsfiddle.net/bwLvyf3k/1/ adresini ziyaret edin.

İlk-çocuk-tipi ile ilk-çocuk arasındaki fark örnek ile anlaşılabilir. Benim tarafımdan oluşturulan aşağıdaki örneği anlamanız gerekiyor ve gerçekten işe yarıyor kodları editörünüze yapıştırabilirsiniz, bunların ne olduğunu ve nasıl olduğunu anlayacaksınız çalışırlar

İlk tip için Kod # 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>

sonuç

.p1, .p2, .p3 biçimlendirilecek ve renkleri kırmızı olacaktır. ikinci div'den sonra .p1 koysak bile kırmızı olacaktır.

İlk çocuk için Kod # 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>

sonuç:

.p2'yi ikinci div 2'den sonra koyarsak kırmızı olmayacak, ancak ilk durumda çalışıyordu.