Primul copil, un selector CSS (primul copil), ne permite să aplicăm stilul primului element direct celuilalt element. Conform specificației CSS Selectors Level 3, este denumită o pseudo-clasă structurală, deoarece bazează stilul oricărui conținut pe modul în care acesta se raportează la conținutul părinte și frate.
Sintaxă
:first-child { //property } Exemplu
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Ieșire
Explicaţie:
Kat timpf
- Două etichete div cuprind blocul de corp din codul de mai sus.
- Există multe etichete de paragraf
cu diverse etichete snap în interiorul primului element div.
- O etichetă de antet și o etichetă de paragraf
cu o etichetă snap sunt ambele incluse în cealaltă etichetă div.
- Am aplicat CSS intern sau încorporat în interiorul blocului head și am creat un stil pentru eticheta snap în eticheta de paragraf. Cu toate acestea, nu ni se cere să creăm o clasă pentru eticheta snap; în schimb, putem folosi primul selector de copil (p:first-child) pentru a identifica instantaneu primul element de etichetă snap din interiorul primei etichete div. Putem da elementului inițial (snap) ceva stil. Există două etichete snap în paragraf, dar după cum putem vedea, doar prima etichetă este stilată, iar celelalte au fost ignorate.
- Putem vedea cum a căutat primul copil prima etichetă snap și a stilizat-o în a doua etichetă div. Elementul trebuie să fie primul element dintre frații săi din interiorul etichetei părinte pentru a fi vizat de primul copil; altfel, nu va fi ales.
FolosindEtichetă de rând
Folosind eticheta de rând
Sintaxă
tr:first-child{ //CSS declarations with style properties; } Exemplu
Pentru o mai bună înțelegere, să ne uităm la un exemplu al primului CSS copil folosind eticheta row
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> Ieșire
Explicaţie:
- Blocul de corp al codului de mai sus conține etichete de tabel pentru informațiile despre elev
.
- Există mai multe rânduri de etichete
în interiorul etichetei de masă , iar eticheta de pe primul rând are antete precum numărul de rol al elevului, numele și notele. Datele elevului sunt conținute în etichetele de rând rămase.
- Pentru stilizarea etichetei de rând
în interiorul etichetei de masă , am aplicat CSS intern sau încorporat în interiorul blocului principal. Cu toate acestea, nu ni se cere să creăm o clasă pentru eticheta de rând; în schimb, pur și simplu folosim primul selector copil (p:first-child), care va recunoaște automat elementul etichetei din primul rând chiar în interiorul etichetei tabelului. Putem stila eticheta de rând, care este primul element. Există mai multe rânduri de etichete în interiorul tabelului. Cu toate acestea, după cum putem vedea, prima etichetă este stilată, în timp ce restul sunt ignorate.
Concluzie
Am aflat despre primul copil al CSS în acest articol. Iată o concluzie a primului copil din articol:
excursie dar
- În CSS, selectorul primului copil (:first-child) ne permite să aplicăm imediat stilul primului element celuilalt element.
- Primul copil stilează materialul în funcție de modul în care acesta se raportează la conținutul părinților și fraților săi.
- O pseudo-clasă care este membru al claselor bazate pe poziție și pe structură este primul copil. Fără a verifica mai mulți frați (elemente) de același tip, prima clasă va încerca să se potrivească cu primul copil imediat al părintelui.