CSS Selectors varalica

U CSS-u su selektori uzorci koji se koriste za odabir DOM elemenata.

Evo primjera korištenja selektora. U sljedećem kodu su ai h1selektori:

a { color: black; } h1 { font-size 24px; }

Varalica uobičajenih selektora

headodabire element s headoznakom

.red odabire sve elemente s 'crvenom' klasom

#nav odabire elemente s 'nav' Id

div.rowodabire sve elemente s divoznakom i klasom 'row'

["]odabire sve elemente s aria-hiddenatributom vrijednosti "true"

  • Odabir zamjenskog znaka. Odabire sve DOM elemente. Pogledajte dolje za upotrebu s drugim selektorima

Selektore možemo kombinirati na zanimljive načine

Neki primjeri:

li aDOM kombinator potomka. Sve aoznake koje su podređene lioznakama

div.row *odabire sve elemente koji su potomci (ili podređeni) elemenata s divoznakom i razredom 'row'

li > aKombinator razlike. Odaberite izravne potomke, umjesto svih potomaka poput selektora potomka

li + aSusjedni kombinator. Odabire element kojem neposredno prethodi prethodni element. U ovom slučaju, samo prva anakon svake li.

li, aOdabire sve aelemente i sve lielemente.

li ~ aKombinator braće i sestara. Odabire aelement koji slijedi lielement.

Pseudo-selektori ili pseudo strukturne klase

Oni su također korisni za odabir strukturnih elemenata iz DOM-a.

Ovo su neki od njih:

:first-child Ciljajte prvi element odmah unutar (ili podređenog) drugog elementa

:last-child Ciljajte zadnji element odmah unutar (ili podređenog) drugog elementa

:nth-child()Ciljajte n-ti element odmah unutar (ili podređenog) drugog elementa. Priznaje brojeve, even, odd, ili formula

a:not(.name)Odabire sve aelemente koji nisu iz .nameklase

::afterOmogućuje umetanje sadržaja na stranicu iz CSS-a, umjesto iz HTML-a. Iako konačni rezultat zapravo nije u DOM-u, na stranici se pojavljuje kao da jest. Sadržaj se učitava nakon HTML elemenata.

::beforeOmogućuje umetanje sadržaja na stranicu iz CSS-a, umjesto iz HTML-a. Iako konačni rezultat zapravo nije u DOM-u, na stranici se pojavljuje kao da jest. Sadržaj se učitava prije HTML elemenata.

Pseudo-klase možemo koristiti za definiranje posebnog stanja elementa DOM-a. Ali oni sami ne ukazuju na neki element.

Neki primjeri:

:hover odabire element nad kojim lebdi pokazivač miša

:focus odabire element koji prima fokus s tipkovnice ili programski

:active odabire element na koji klikne pokazivač miša

:link odabire sve linkove koji još nisu kliknuti

:visited odabire vezu koja je već kliknuta

Više informacija o selektoru n-tog djeteta

nth-childSelektor je CSS pseudo-klase uzimajući uzorak po kojem se podudaraju s jednim ili više elemenata u odnosu na njihov položaj među braćom i sestrama.

Sintaksa

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

Uzorak

Obrasci koje prihvaćaju nth-childmogu doći u obliku ključnih riječi ili jednadžbe oblika An + B.

Ključne riječi

Neparan

Nepar vraća sve neparne elemente dane vrste.

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

Even vraća sve parne elemente dane vrste.

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

An + B

Vraća sve elemente koji se podudaraju s jednadžbom An + B za svaku pozitivnu cijelu vrijednost od n (uz 0).

Na primjer, sljedeće će odgovarati svakom 3. elementu sidra:

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

Igre

CSS Diner je web igra koja podučava gotovo svemu što treba znati o kombiniranju selektora.

Dodatne reference

Postoji mnogo više CSS selektora! Saznajte o njima na CodeTuts, CSS-tricks.com ili na Mozilla Developer Network.