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's get started</span></p> Izlaz
Obrazloženje:
- Dvije oznake div sačinjavaju blok tijela u gornjem kodu.
- Postoji mnogo oznaka odlomaka
s raznim snap oznakama unutar prvog div elementa.
java za pauzu
- Oznaka zaglavlja i oznaka odlomka
s oznakom snap oba su uključena u drugu div oznaku.
- 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.
- 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
Sintaksa
tr:first-child{ //CSS declarations with style properties; } Primjer
Za bolje razumijevanje, pogledajmo primjer prvog podređenog CSS-a koji koristi oznaku reda
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:
- Blok tijela gornjeg koda sadrži oznake tablice za podatke učenika
.
- Postoji nekoliko redaka oznaka
unutar 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.
- Za oblikovanje oznake retka
unutar 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:
- U CSS-u, selektor prvog djeteta (:first-child) omogućuje nam da odmah primijenimo stil prvog elementa na drugi element.
- Prvo dijete oblikuje materijal na temelju toga kako je povezan sa sadržajem roditelja i braće i sestara.
- 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.