Bir CSS seçici (ilk çocuk) olan ilk çocuk, ilk öğenin stilini doğrudan diğer öğeye uygulamamızı sağlar. CSS Seçiciler Düzey 3 spesifikasyonuna göre, herhangi bir içeriğin stilini, ana ve kardeş içerikle olan ilişkisine dayandırdığı için yapısal sözde sınıf olarak anılır.

Sözdizimi

 :first-child { //property } 

Örnek

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p> 

Çıktı

tarihten dizeye dönüştürme

Açıklama:

Ubuntu'da ipconfig

1. Yukarıdaki koddaki gövde bloğunu iki div etiketi oluşturur.
2. Çok sayıda paragraf etiketi var

   ilk div öğesinin içinde çeşitli ek etiketler bulunur.

3. Bir başlık etiketi ve bir paragraf etiketi

   Snap etiketli her ikisi de diğer div etiketinin içinde yer alır.

4. Head bloğunun içine dahili veya gömülü CSS uyguladık ve paragraf etiketi içindeki snap etiketine stil verdik. Ancak snap etiketi için bir sınıf oluşturmamıza gerek yok; bunun yerine, ilk div etiketi içindeki ilk ek etiket öğesini anında tanımlamak için ilk alt seçiciyi (p:first-child) kullanabiliriz. İlk öğeye (snap) biraz stil verebiliriz. Paragrafta iki ek etiket var, ancak görebileceğimiz gibi yalnızca ilk etikete stil uygulanmış, diğerleri göz ardı edilmiştir.
5. İlk çocuğun ilk snap etiketini nasıl aradığını ve onu ikinci div etiketinde nasıl şekillendirdiğini görebiliriz. Öğe, ebeveyn etiketi içindeki kardeşleri arasında ilk çocuk tarafından hedeflenecek ilk öğe olmalıdır; aksi takdirde seçilmeyecektir.

KullanmakSatır Etiketi

Satır etiketini kullanmaCSS'nin ilk çocuğunu uygulayabiliriz. Sonuç olarak, eğer ilk alt seçiciyi kullanarak satır etiketine stil uygularsak, yalnızca ilk satır etiketi stillendirilecek ve satır etiketinin geri kalanı stillendirilmeyecektir. İlk çocuk, ana etiketin içindeki ilk satırdaki öğeyi hedefleyecek ve geri kalanı göz ardı edilecektir.

Sözdizimi

sanjay dutt ve

 tr:first-child{ //CSS declarations with style properties; } 

Örnek

Daha iyi anlamak için satır etiketini kullanan ilk alt CSS örneğine bakalımCSS'de.

 Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> 

Çıktı

Açıklama:

1. Yukarıdaki kodun gövde bloğu öğrenci bilgilerine yönelik tablo etiketlerini içerir.
2. Birkaç satır etiket vartablo etiketinin içindeve ilk satır etiketinde öğrencinin rulo numarası, adı ve notları gibi başlıklar bulunur. Öğrencinin verileri kalan satır etiketlerinde bulunur.
3. Satır etiketini şekillendirmek içintablo etiketinin içinde, head bloğunun içine dahili veya gömülü CSS uyguladık. Ancak satır etiketi için bir sınıf oluşturmamıza gerek yok; bunun yerine, tablo etiketinin hemen içindeki ilk satırdaki etiket öğesini otomatik olarak tanıyacak olan ilk çocuk seçiciyi (p:first-child) kullanıyoruz. İlk eleman olan satır etiketine stil verebiliriz. Tablonun içinde birkaç satır etiket vardır. Ancak görebileceğimiz gibi, ilk etiket stillendirilirken geri kalanlar göz ardı ediliyor.

Çözüm

Bu yazımızda CSS'nin ilk çocuğunu öğrendik. İşte makalede ilk çocuğun bir sonucu:

1. CSS'de, ilk çocuk (:first-child) seçici, ilk öğenin stilini diğer öğeye hemen uygulamamızı sağlar.
2. İlk çocuk materyali ebeveynlerinin ve kardeşlerinin içeriğiyle olan ilişkisine göre şekillendirir.
3. Konum tabanlı ve yapı tabanlı sınıfların üyesi olan sözde sınıf, ilk çocuktur. Aynı türde daha fazla kardeş (öğe) olup olmadığı kontrol edilmeden, birinci sınıf, ebeveynin ilk yakın çocuğuyla eşleşmeye çalışacaktır.