Izbirnik prvega otroka v CSS: izbira prvega elementa

Pseudo-razred prvega otroka v CSS se uporablja za izbiro prvega elementa v vsebniku. V tem primeru se ne upošteva posebna vrsta elementa, ima le njen položaj glede na starševsko vrednost. V delu tega selektorja je nekaj tankoč, kar je treba razumeti za pravilno uporabo.

CSS pseudo-razredi

Skupaj z identifikatorji, razredi, oznakami in atributi, so psevdo-razredi ena izmed vrst CSS selektorjev. Njihova značilnost je, da jih ni mogoče namestiti neposredno v HTML.

Primeri pseudo-razredov so "prva vrstica v vsebniku", "prva črka v besedi", "prvi otrok staršev". Ta brskalnik lahko zazna te elemente šele po analizi strani in zbiranju drevesa DOM, v nekaterih primerih pa tudi po prikazu.

Prisotnost takega mehanizma v CSS vam omogoča, da določite obliko, ki ni vezana na HTML-kodo, kar odpira velike priložnosti za oblikovanje.

Izbira prvega elementa

Pseudo-razred prvega otroka v CSS je odgovoren za izbiro prvega elementa v nadrejenem vsebniku. Besedilna vozlišča se prezrejo, štejejo se samo veljavne oznake.

Najprej najti prve elemente v dveh preprostih HTML-strukturah.

Prva točka
Druga točka
Tretja točka
Samo obstajajo dva načina živeti življenje. Prvi - kot če ne bi bilo čudežev. Drugi - kot da bi bilo samo čudeže. Albert Einstein

Zato bo izbran prvi element seznama in oznaka, ki definira pisavo s krepko pisavo.

Prva točka
dva načina

Sintaksa

Vse psevdo-razrede v CSS so določene s posebno predlogo. Najprej je določen glavni selektor, nato želeni psevdo-razred, ki ga ločita dvopičje.

b: prvi-otro {{tekst-dekoracija: podčrtaj-}

Tako pravilo bo poudarilo besedilo prvega elementa b znotraj vsakega vsebnika.

Vsi se želijo spremeniti svet, vendar se nihče ne želi spremeniti sam.Leo Tolstoj
Kdo ve, kako, On, ki ne ve, kako - uči druge.Bernard Shaw

V sliki je očitno, da so izbrani le elementi, ki ustrezajo selekciji oznake b in izbirniku psevduklasa: prvega otroka. Slog je bil uporabljen v vsaki posodi, v tem primeru znotraj vseh elementov na seznamu.

Poleg oznake lahko kot glavni ključ uporabite tudi katerikoli drugi izbirnik CSS, na primer:

.razred: prvi otrok {} [alt]: prvi otrok {} *: prvi otrok {}

Pogoste napake

Pseudo-razred prvega elementa prvega otroka v CSS izbere strogo oznako, ki je najprej v nadrejenem vsebniku. Tudi če se element popolnoma ujema s selektorjem, vendar ni prvi otrok, ne bo izbran.

Na primer, vzemite prejšnji seznam citatov in prenesite avtorje na začetek.

Leo TolstojVsi se želijo spremeniti svet, vendar se nihče ne želi spremeniti sam.
Bernard ShawKdo ve, kako, On, ki ne ve, kako - uči druge.

Čeprav izbirnik elementov ostaja isti, se slog CSS ne uporablja, saj je prvi element v vsebniku zdaj i.

Druga napaka je ignoriranje oznaka
. To je isti element HTML kot drugi. Če je v vsebniku pred iskalnim bloku, CSS izbirnik prvega otroka ne deluje.

Računovodstvo vrste elementov

Da bi se izognili takšnim situacijam, lahko uporabite prvotni tip pseudo-razreda. Deluje enako kot izbirnik prvega otroka CSS, vendar upošteva vrsto elementa.

b: prva vrsta {tekst-dekoracija: podčrtaj-}

Pri izračunu upoštevamo le elemente, ki ustrezajo izbirniku b.

Izbira zadnjega elementa

Obstaja tudi psevdo-razred zadnjega otroka, ki deluje podobno kot prvega otroka selektorja CSS, vendar začne šteti elemente s konca vsebnika.