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
    Selectarea primului element din CSS

    Î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.
    Selectarea primului element din CSS

    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-}
    Selectarea primului element în CSS, luând în considerare tipul

    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.

    Distribuiți pe rețelele sociale:

    înrudit
    CSS, pseudo-clasă, pseudo-element: hover, child, targetCSS, pseudo-clasă, pseudo-element: hover, child, target
    Cum se face o listă drop-down în HTMLCum se face o listă drop-down în HTML
    Selectorul CSS și rolul său în formatarea documentelor htmlSelectorul CSS și rolul său în formatarea documentelor html
    Ce este necesar și cum este scris selectorul jQuery?Ce este necesar și cum este scris selectorul jQuery?
    Blochează aspectul tagurilor de div HTMLBlochează aspectul tagurilor de div HTML
    Aliniere centru: aspect CSSAliniere centru: aspect CSS
    Stilul pseudo-rus, caracteristicile sale caracteristice și caracteristicile de dezvoltareStilul pseudo-rus, caracteristicile sale caracteristice și caracteristicile de dezvoltare
    Structura documentului HTML: etichete principale, exempluStructura documentului HTML: etichete principale, exemplu
    Lista principalelor etichete HTMLLista principalelor etichete HTML
    Cadrul CSS: Impromptu și EfectCadrul CSS: Impromptu și Efect
    » » Selectorul pentru primul copil în CSS: selectarea primului element