CSS Selektori - Konačna lista

Kao front-end programeru koji svakodnevno napiše otprilike 238 redova CSS-a, bilo mi je potrebno. Ništa u sledećem tekstu nije stvarno moje (iako su rekli da sam uvek dodavao nešto posebno ...), već je prikupljeno iz izvora koji su dostupni svima (ne samo w3schools ). Na dnu imate ovu ULTIMATNU LISTU koju možete lako preuzeti, nema dobrodošlice!

Obratite pažnju na razmake!

Absolute Evergreens

*
Svi elementi su izabrani.

.banana
Odabrani su svi elementi sa klasom banana.

#banana
Izabran je element sa id banana.

p
Svi <p> elementi su izabrani.

Relativni Evergreens

div, p
Svi elementi <p> i <div> su izabrani.

div p - selektor potomka
Odabrani su svi <p> elementi unutar <div> elemenata.

div > p - direct children
Odabrani su svi <p> elementi čiji je direktni roditelj <div>.
Radi i obrnuto (p <div)

div + p
Izabrana su sva mesta <p> elemenata neposredno nakon <div> elementa.

div ~ p
Odabrani su svi <p> elementi kojima prethodi <div> element.

Specifična kategorija

Ova klasa se često koristi za atribute: cilj, naslov, jezik i href .

[title]
Izabrani su svi elementi sa atributom naslova.

[title=banana]
Svi elementi koji imaju vrednost „banana“ naslovnog atributa.

[title~=banana]
Svi elementi koji u vrednosti naslovnog atributa sadrže „banana“.

[title|=banana]
Svi elementi čija vrednost naslovnog atributa startuje sa „banana“.

[title^=banana]
Svi elementi čija vrednost naslovnog atributa počinje sa „banana“.

[title$=banana]
Svi elementi čija se vrednost atributa naslova završava sa „banana“.

[title*=banana]
Svi elementi čija vrednost atributa naslova sadrži podniz „banana“.

Quasi-Evergreen

*Ovi selektori su pozvani pseudo klase i oni moraju ostati sa drugim selektorom i opisati njegovo stanje ili svojstvo *

:hover
Bira elemente kada je u stanju lebdenja.

:link
Bira elemente ako su veze (jednom sa href atributom).

:visited
Bira elemente ako su posećeni.

:active
Bira elemente kada su aktivni (kliknuti).

:focus
Bira elemente kada su fokusirani.

:checked
Bira elemente kada su označeni.

:required
Bira elemente sa potrebnim atributom.

:optional
Bira elemente bez potrebnog atributa.

:first-child
Bira prvi element u roditelju.

:nth-child(number)

Bira podređeni element na osnovu broja (ako je 2, onda bira drugo dete, ako je 2n, tada bira svu decu u parnim položajima).

:only-child
Bira element samo ako je to jedino dete.

:first-of-type
Bira prvi element tipa.

:nth-of-type(number)
Bira podređeni element tipa na osnovu broja (ako je 2, onda bira drugi tip, ako je 2n, onda bira sve podređene elemente tipa u parnim položajima).

:only-of-type
Bira element samo ako je tog tipa.

:empty
Bira elemente koji ne sadrže tekst ili podređene elemente.

Za više pseudo klasa pogledajte ovaj post

Sledećih nekoliko selektora naziva se Pseudo Elements i oni biraju samo delove elemenata

::before:
Dodajte sadržaj pre elementa (npr. Uvodni citat, ikona, slika ...).

::after
Dodajte sadržaj nakon elementa (npr. Završni citat, clearfik ...).

::first-letter
Bira prvo slovo elementa.

::first-line
Bira prvi red elementa.

::selection
Bira deo elementa koji je izabran.

Indie Hit

* + *- lobotomirana sova
Svi elementi koji prelaze ostale elemente.

Za više postova o CSS-u pretplatite se na naš bilten.