În CSS, selectoarele sunt modele utilizate pentru selectarea elementelor DOM.

Iată un exemplu de utilizare a selectoarelor. În următorul cod, a și h1 sunt selectoare:

a {
  color: black;
}

h1 {
  font-size 24px;
}

Foaie de trișare a selectorilor obișnuiți

head selectează elementul cu head etichetă

.red selectează toate elementele cu clasa „roșie”

#nav selectează elementele cu Id-ul „nav”

div.row selectează toate elementele cu div etichetă și clasa „rând”

[aria-hidden="true"] selectează toate elementele cu aria-hidden atribut cu o valoare „adevărat”

  • Selector wildcard. Selectează toate elementele DOM. Vedeți mai jos pentru utilizarea acestuia cu alte selectoare

Putem combina selectoarele în moduri interesante

Cateva exemple:

li a Combinator descendent DOM. Toate a etichete ale căror copii sunt li Etichete

div.row * selectează toate elementele care sunt descendente (sau copil) ale elementelor cu div eticheta și clasa „rând”

li > a Combinator de diferențe. Selectați descendenții direcți, în locul tuturor descendenților, precum selectorii descendenților

li + a Combinatorul adiacent. Selectează elementul care este imediat precedat de elementul anterior. În acest caz, doar primul a după fiecare li.

li, a Selectează toate a elemente și toate li elemente.

li ~ a Combinatorul de frați. Selectează a element care urmează a li element.

Pseudo-selectori sau clase pseudo-structurale

Acestea sunt utile și pentru selectarea elementelor structurale din DOM.

Aici sunt câțiva dintre ei:

:first-child Vizați primul element imediat în interiorul (sau copilul) unui alt element

:last-child Vizați ultimul element imediat în interiorul (sau copilul) unui alt element

:nth-child() Vizați al n-lea element imediat în interiorul (sau copilul) unui alt element. Admite numere întregi, even, odd, sau formule

a:not(.name) Selectează toate a elemente care nu sunt ale .name clasă

::after Permite inserarea de conținut pe o pagină din CSS, în loc de HTML. Deși rezultatul final nu este de fapt în DOM, acesta apare pe pagină ca și cum ar fi. Acest conținut se încarcă după elemente HTML.

::before Permite inserarea de conținut pe o pagină din CSS, în loc de HTML. Deși rezultatul final nu este de fapt în DOM, acesta apare pe pagină ca și cum ar fi. Acest conținut se încarcă înainte de elementele HTML.

Putem folosi pseudo-clase pentru a defini o stare specială a unui element al DOM. Dar nu indică un element de la sine.

Cateva exemple:

:hover selectează un element care este planat de un indicator al mouse-ului

:focus selectează un element care primește focalizarea de la tastatură sau programat

:active selectează un element care face clic de un indicator al mouse-ului

:link selectează toate linkurile care nu au fost încă făcute clic

:visited selectează un link pe care s-a făcut deja clic

Mai multe informații despre selectorul al nouălea copil

nth-child selectorul este o clasă psuedo css care ia un model prin care să se potrivească unul sau mai multe elemente în raport cu poziția lor dintre frați.

Sintaxă

  a:nth-child(pattern) {
    /* Css goes here */
  }

Model

Tiparele acceptate de nth-child poate veni sub formă de cuvinte cheie sau o ecuație de forma An + B.

Cuvinte cheie

Ciudat

Odd returnează toate elementele impare ale unui tip dat.

  a:nth-childe(odd) {
    /* CSS goes here */
  }
Chiar

Returnează chiar toate elementele pare ale unui tip dat.

  a:nth-childe(even) {
    /* CSS goes here */
  }

Un + B

Returnează toate elementele care se potrivesc cu ecuația An + B pentru fiecare valoare întreagă pozitivă a lui n (în plus față de 0).

De exemplu, următoarele vor corespunde fiecărui element de ancorare 3:

  a:nth-childe(3n) {
    /* CSS goes here */
  }

Jocuri

CSS Diner este un joc web care ne învață aproape tot ce trebuie știut despre combinarea selectorilor.

Referințe suplimentare

Există mult mai mulți selectori CSS! Aflați despre ele la CodeTuts, CSS-tricks.com, sau la Rețeaua de dezvoltatori Mozilla.