Odabir prve dijete u CSS-u: odabir prvog elementa

Prvo dijete pseudo-klase u CSS koristi se za odabir prvog elementa u spremniku. U tom se slučaju ne uzima u obzir specifična vrsta elementa, samo njegova pozicija u odnosu na roditelja ima vrijednost. Postoji nekoliko suptilnosti u radu ovog izbornika, što se mora shvatiti za pravilnu uporabu.

CSS pseudo-klase

Uz identifikatore, klase, oznake i atribute, pseudo-klase su jedna od vrsta CSS selektora. Njihova je značajka da se ne mogu izravno instalirati u HTML.

Primjeri pseudo-klasa su "prva linija u spremniku", "prvo slovo u riječi", "prvo dijete roditelja". Preglednik može otkriti takve elemente tek nakon što je analizirala stranicu i sastavio DOM stablo, au nekim slučajevima tek nakon renderiranja.

Prisutnost u CSS takvog mehanizma omogućuje vam definiranje dizajna, a ne vezan za HTML kôd, što otvara velike mogućnosti za dizajn.

Odabir prve stavke

Prvo dijete pseudo-klase u CSS-u odgovorno je za odabir prvog elementa u roditeljskom spremniku. Tekstni čvorovi se zanemaruju, računaju se samo važeće oznake.

Pronađimo prve elemente u dvije jednostavne HTML strukture.

Prva stavka
Druga stavka
Treća točka
Postoje samo dva načina živjeti život. Prvi - kao da nema čuda. Drugi - kao da su samo čuda. Albert Einstein

Kao rezultat toga, bit će odabrana prva stavka popisa i oznaka koja određuje font bold font.

Prva stavka
dva načina

sintaksa

Sve pseudo-klase u CSS definirane su određenim predloškom. Najprije se navodi glavni selektor, zatim željenu pseudo-klasu odvojenu dvotočkom.

b: prvo dijete {text-decoration: underline-}

Takvo pravilo naglašava tekst prvog elementa b unutar svakog spremnika.

Svatko se želi promijeniti svijetu, ali nitko se ne želi promijeniti sam.Leo Tolstoj
Tko zna kako, on radi, koji ne zna kako - on podučava druge.Bernard Shaw

Na snimci zaslona očito je da su odabrani samo elementi koji odgovaraju odabiru oznake b i selektoru pseudo-klase: prvo dijete. Stil je primijenjen unutar svakog spremnika, u ovom slučaju unutar svih stavki na popisu.

Osim oznake, bilo koji drugi CSS izbornik može se koristiti kao glavni, primjerice:

.klasa: prvo dijete {} [alt]: prvo dijete {} *: prvo dijete {}

Uobičajene pogreške

Pseudo-klasa prvog djeteta prvog elementa u CSS-u odabire strogo oznaku koja je na prvom mjestu u roditeljskom spremniku. Čak i ako se element u potpunosti podudara s izbornikom, ali nije prvi dijete, neće biti odabran.

Na primjer, uzmite prethodni popis citata i prenesite autore na početak.

Leo TolstojSvatko se želi promijeniti svijetu, ali nitko se ne želi promijeniti sam.
Bernard ShawTko zna kako, on radi, koji ne zna kako - on podučava druge.

Iako odabir elemenata ostaje isti, stil CSS ne vrijedi jer je prvi element u spremniku sada i.

Još jedna pogreška zanemaruje oznaka
. To je isti HTML element kao i drugi. Ako se nalazite u spremniku prije blokiranja pretraživanja, izbornik CSS prve dijete ne radi.

Računovodstvo vrste elementa

Da biste izbjegli takve situacije, možete upotrijebiti pseudo-klasu prvog tipa. Djeluje isto kao i izbornik CSS prve dijete, ali uzima u obzir vrstu elementa.

b: prvi tip {text-decoration: underline-}

Sada u obzir uzimaju se samo elementi koji odgovaraju odabiru b.

Odabir posljednje stavke

Tu je i posljednje dijete za pseudo klase, koje radi slično kao prvo dijete CSS izbora, ali počinje brojati stavke s kraja spremnika.