Prvo dijete, CSS selektor (prvo dijete), omogućuje nam primjenu stila prvog elementa izravno na drugi element. Prema specifikaciji CSS Selectors Level 3, naziva se strukturnom pseudo-klasom budući da temelji stil bilo kojeg sadržaja na tome kako se odnosi na roditeljski i srodni sadržaj.

Sintaksa

 :first-child { //property } 

Primjer

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

Izlaz

Obrazloženje:

1. Dvije oznake div sačinjavaju blok tijela u gornjem kodu.
2. Postoji mnogo oznaka odlomaka

   s raznim snap oznakama unutar prvog div elementa.

   java za pauzu

3. Oznaka zaglavlja i oznaka odlomka

   s oznakom snap oba su uključena u drugu div oznaku.

4. Primijenili smo interni ili ugrađeni CSS unutar bloka glave i stilizirali oznaku za pričvršćivanje unutar oznake odlomka. Međutim, nismo obavezni stvoriti klasu za snap tag; umjesto toga, možemo upotrijebiti selektor prvog djeteta (p:first-child) za trenutnu identifikaciju prvog elementa oznake za pričvršćivanje unutar prve oznake div. Početnom elementu (snap) možemo dati neki stil. Postoje dvije oznake za pričvršćivanje unutar odlomka, ali kao što vidimo, samo je prva oznaka stilizovana, a ostale su zanemarene.
5. Možemo vidjeti kako je prvo dijete tražilo prvu snap oznaku i stiliziralo je u drugoj div oznaci. Element mora biti prvi element među svojim srodnim elementima unutar nadređene oznake na koji cilja prvo dijete; u suprotnom, neće biti izabran.

KoristitiOznaka reda

Korištenje oznake reda, možemo primijeniti prvo dijete CSS-a. Kao rezultat toga, ako primijenimo stil na oznaku retka pomoću selektora prvog djeteta, stilizirat će se samo oznaka prvog retka, a ostatak oznake retka neće biti stiliziran. Prvo dijete ciljat će element prvog retka unutar nadređene oznake, a ostatak će biti zanemaren.

Sintaksa

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

Primjer

Za bolje razumijevanje, pogledajmo primjer prvog podređenog CSS-a koji koristi oznaku redau CSS-u.

 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> 

Izlaz

Obrazloženje:

1. Blok tijela gornjeg koda sadrži oznake tablice za podatke učenika.
2. Postoji nekoliko redaka oznakaunutar oznake tablice, a oznaka u prvom retku ima zaglavlja kao što su broj učenika, ime i ocjene. Podaci učenika sadržani su u preostalim oznakama reda.
3. Za oblikovanje oznake retkaunutar oznake tablice, primijenili smo interni ili ugrađeni CSS unutar bloka glave. Međutim, nismo obvezni stvoriti klasu za oznaku retka; umjesto toga, jednostavno koristimo selektor prvog djeteta (p:first-child), koji će automatski prepoznati element oznake prvog reda unutar oznake tablice. Možemo oblikovati oznaku reda, koja je prvi element. Postoji nekoliko redaka oznaka unutar tablice. Međutim, kao što vidimo, prva oznaka se stilizira dok se ostale zanemaruju.

Zaključak

U ovom smo članku naučili o prvom djetetu CSS-a. Evo zaključka prvog djeteta u članku:

1. U CSS-u, selektor prvog djeteta (:first-child) omogućuje nam da odmah primijenimo stil prvog elementa na drugi element.
2. Prvo dijete oblikuje materijal na temelju toga kako je povezan sa sadržajem roditelja i braće i sestara.
3. Pseudoklasa koja je član klasa temeljenih na poziciji i strukturi je prvo dijete. Bez provjere više braće i sestara (elemenata) istog tipa, prva klasa će se pokušati uskladiti s prvim neposrednim djetetom roditelja.