logo

TechCodeview

Prvi otrok CSS

Prvi otrok, izbirnik CSS (first-child), nam omogoča, da slog prvega elementa uporabimo neposredno za drugi element. V skladu s specifikacijo CSS Selectors Level 3 se imenuje strukturni psevdorazred, saj temelji slog katere koli vsebine na tem, kako se nanaša na nadrejeno in sorodno vsebino.

Sintaksa 

 :first-child { //property }

Primer

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

Izhod

Prvi otrok CSS

Pojasnilo:

  1. Dve oznaki div sestavljata blok telesa v zgornji kodi.
  2. Oznak odstavkov je veliko

    z različnimi oznakami snap znotraj prvega elementa div.

  3. Oznaka glave in oznaka odstavka

    z oznako snap sta oba vključena v drugo oznako div.

  4. Znotraj bloka glave smo uporabili notranji ali vdelan CSS in oblikovali oznako snap znotraj oznake odstavka. Vendar nam ni treba ustvariti razreda za oznako snap; namesto tega lahko uporabimo izbirnik prvega podrejenega elementa (p:first-child), da takoj prepoznamo prvi element oznake snap znotraj prve oznake div. Začetnemu elementu (snap) lahko damo nekaj stila. Znotraj odstavka sta dve oznaki za pripenjanje, a kot lahko vidimo, je stilizirana le prva oznaka, druge pa so bile prezrte.
  5. Vidimo lahko, kako je prvi otrok poiskal prvo oznako snap in jo oblikoval v drugi oznaki div. Element mora biti prvi element med svojimi brati in sestrami znotraj nadrejene oznake, na katerega cilja prvi podrejeni element; sicer ne bo izbrana.

UporabljatiOznaka vrstice

Uporaba oznake vrstice, lahko uporabimo prvega otroka CSS. Posledično, če uporabimo slog za oznako vrstice s prvim podrejenim izbirnikom, bo stilizirana samo oznaka prve vrstice, preostali del oznake vrstice pa ne bo stiliziran. Prvi podrejeni element bo ciljal na element prve vrstice znotraj nadrejene oznake, ostali pa bodo prezrti.

Sintaksa 

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

Primer

Za boljše razumevanje si poglejmo primer prvega podrejenega CSS, ki uporablja oznako vrsticev CSS.

 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>

Izhod

Prvi otrok CSS

Pojasnilo:

  1. Blok telesa zgornje kode vsebuje oznake tabele za informacije o študentih.
  2. Obstaja več vrstic oznakznotraj oznake tabele, in oznaka prve vrstice ima glave, kot so študentova številka, ime in ocene. Študentovi podatki so vsebovani v preostalih oznakah vrstic.
  3. Za oblikovanje oznake vrsticeznotraj oznake tabele, smo znotraj bloka glave uporabili notranji ali vdelan CSS. Vendar nam ni treba ustvariti razreda za oznako vrstice; namesto tega preprosto uporabljamo izbirnik prvega podrejenega elementa (p:first-child), ki bo samodejno prepoznal element oznake prve vrstice neposredno znotraj oznake tabele. Oblikujemo lahko oznako vrstice, ki je prvi element. V tabeli je več vrstic oznak. Vendar, kot lahko vidimo, se prva oznaka oblikuje, ostale pa se ne upoštevajo.

Zaključek

V tem članku smo izvedeli o prvem otroku CSS. Tukaj je zaključek prvega otroka v članku:

  1. V CSS nam izbirnik prvega otroka (:first-child) omogoča takojšnjo uporabo sloga prvega elementa na drugem elementu.
  2. Prvorojenec gradi gradivo glede na to, kako se nanaša na vsebino staršev in bratov in sester.
  3. Psevdorazred, ki je član razredov, ki temeljijo na položaju in strukturi, je prvi otrok. Brez preverjanja več bratov in sester (elementov) istega tipa se bo prvi razred poskušal ujemati s prvim neposrednim otrokom starša.