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ă.
conținut
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.
- Selectori CSS. Tipuri de selectori
- CSS, pseudo-clasă, pseudo-element: hover, child, target
- Cum se face o listă drop-down în HTML
- Selectorul CSS și rolul său în formatarea documentelor html
- Ce este necesar și cum este scris selectorul jQuery?
- Blochează aspectul tagurilor de div HTML
- Aliniere centru: aspect CSS
- Stilul pseudo-rus, caracteristicile sale caracteristice și caracteristicile de dezvoltare
- Structura documentului HTML: etichete principale, exemplu
- Lista principalelor etichete HTML
- Cadrul CSS: Impromptu și Efect
- Înainte de CSS - original, convenabil, practic
- Overflow CSS: afișarea conținutului unui element
- CSS: hover. Efecte originale ale hover-ului
- Descriere: generator de numere de loterie
- CSS: pseudo-elemente și pseudo-clase
- CSS de bază: aspectul paginilor
- Utilizarea elementelor DOM prin jаvascript getElementById
- Teredo Tunneling Pseudo-Interface - ce este? Descrierea și instalarea dispozitivului de…
- Exemplu de jQuery. Exemple simple de script-uri pe jQuery
- Proprietatea de opacitate CSS: controlul transparenței