Selectorul pentru primul copil în CSS: selectarea primului element

Pseudo-clasa primul copil în CSS este utilizată pentru a selecta primul element din container. În acest caz, tipul specific de element nu este luat în considerare, doar poziția acestuia față de mamă are valoare. Există unele subtilități în munca acestui selector, care trebuie înțeleasă pentru utilizarea corectă.

CSS pseudo-clase

Împreună cu identificatori, clase, etichete și atribute, pseudo-clasele sunt unul dintre tipurile de selectori CSS. Caracteristica lor este că nu pot fi instalate direct în HTML.

Exemple de pseudo-clase sunt "primul rând din container", "prima literă din cuvânt", "primul copil al părintelui". Browserul poate detecta astfel de elemente numai după ce a analizat pagina și a compilat arborele DOM și, în unele cazuri, numai după randare.

Prezența în CSS a unui astfel de mecanism vă permite să definiți designul, nu legat de codul HTML, ceea ce deschide oportunități excelente pentru design.

Selectarea primului element

Pseudo-clasa primul copil în CSS este responsabilă pentru selectarea primului element din containerul părinte. Nodurile de text sunt ignorate, se evaluează numai etichetele valide.

Să găsim primele elemente în două structuri HTML simple.

Primul element
Al doilea element
Al treilea punct
Există numai două căi pentru a trăi viața. Primul - ca și cum nu ar exista minuni. Al doilea - ca și cum ar fi fost doar minuni în jur. Albert Einstein

Ca rezultat, primul element al listei și eticheta care definesc fontul caractere aldine al fontului vor fi selectate.

Primul element
două căi

sintaxă

Toate pseudo-clasele din CSS sunt definite de un șablon specific. Mai întâi, selectorul principal este specificat, apoi pseudo-clasa dorită separată printr-un colon.

b: primul copil {text-decoration: underline-}

O astfel de regulă va sublinia textul primului element b din interiorul fiecărui container.

Toată lumea vrea să se schimbe lumea, dar nimeni nu vrea să se schimbe însuși.Leo Tolstoy
Cine știe cum, el o face, care nu știe cum - el îi învață pe alții.Bernard Shaw

În captura de ecran este evident că sunt selectate numai elementele corespunzătoare selectorului etichetei b și ale selectorului clasei pseudo-class: first-child. Stilul a fost aplicat în interiorul fiecărui container, în acest caz în interiorul tuturor articolelor din listă.

În plus față de etichetă, orice alt selector CSS poate fi folosit ca principal, de exemplu:

.clasa: primul-copil {} [alt]: primul-copil {} *: primul-copil {}

Greșeli comune

Pseudo-clasa primului element primul copil în CSS selectează o etichetă strict care este în primul rând în containerul părinte. Chiar dacă elementul se potrivește pe deplin selectorului, dar nu este primul copil, acesta nu va fi selectat.

De exemplu, luați lista precedentă de citate și transferați autorii la început.

Leo TolstoyToată lumea vrea să se schimbe lumea, dar nimeni nu vrea să se schimbe însuși.
Bernard ShawCine știe cum, el o face, care nu știe cum - el îi învață pe alții.

Deși selectorul elementului rămâne același, stilul CSS nu se aplică, deoarece primul element din container este acum i.

O altă greșeală este ignorarea etichetă
. Acesta este același element HTML ca și ceilalți. Dacă este în containerul anterior blocului de căutare, selectorul CSS primul copil nu funcționează.

Element de tip contabilitate

Pentru a evita astfel de situații, puteți folosi primul tip de pseudo-clasă. Funcționează la fel cu selectorul CSS primul copil, dar ia în considerare tipul elementului.

b: primul tip de {text-decoration: underline-}

Acum se iau în calcul numai elementele corespunzătoare selectorului b.

Selectarea ultimului element

Există, de asemenea, un ultim copil pseudo-clasic, care funcționează similar cu primul selector CSS, dar începe să numere elementele de la sfârșitul containerului.