WEBnSTUDY.com
CSS

CSS pseudo-klase prema mestu elementa

Ove pseudo-klase modifikuju selektor, tako da se onda primenjuje na element, zavisno od toga na kom mestu u nadređenom (kontejnerskom) elementu se taj elemenat nalazi.

:first-child prvi unutar nadređenog elementa
:last-child poslednji unutar nadređenog elementa
:only-child jedini unutar nadređenog elementa
:nth-child(x) N-ti unutar nadređenog elementa
:nth-last-child(x) N-ti otpozadi unutar nadređenog elementa
:first-of-type prvi element određenog tipa
:last-of-type poslednji element određenog tipa
:only-of-type jedini element određenog tipa
:nth-of-type(x) N-ti element određenog tipa
:nth-last-of-type(x) N-ti otpozadi element određenog tipa

To znači da možemo zadati promenu izgleda elementu ako je on npr. prvi unutar nekog drugog elementa, ako je na neparnoj poziciji, ako je određenog tipa...

:first-child
:last-child

Za pseudo-klasu :first-child modifikacija će nastupiti samo ako je element na koji se odnosi selektor prvi podređeni element unutar svog nadređenog elementa, ili možda bolje reći, prvi element na svom hijerarhijskom nivou. Isto važi i za :last-child, s tim što je u pitanju poslednji element.

selektor:first-child { [lista deklaracija] } ... <x> <x>...</x> <s>...</s> <x> <s>...</s> <y>...</y> </x> </x> <s> <s>...</s> </s>

:only-child

Primenjuje se samo ako je element na koji se odnosi selektor jedini podređeni element unutar svog nadređenog elementa.

selektor:only-child { [lista deklaracija] } ... <x> <x>...</x> <s>...</s> </x> <x> <s>...</s> </x>

:nth-child(x)
:nth-last-child(x)

Formatiranje se primenjuje na tačno određeni ili na svaki N-ti element unutar kontejnerskog elementa. Suštinski ove dve pseudo-klase funkcionišu na isti način, s tim što :nth-child broji od prvog, a :nth-last-child od poslednjeg elementa. Prvi element nije "nulti", nego zaista prvi. Zadato x može biti:

selektor:nth-child(odd) { [lista deklaracija] } ... <x> <s>...</s> <s>...</s> <y>...</y> <s>...</s> <s>...</s> </x>

:first-of-type
:last-of-type

Za pseudo-klasu :first-of-type modofikacija će nastupiti samo ako je element na koji se odnosi selektor prvi od svih elemenata tog tipa unutar svog nadređenog elementa, ili možda bolje reći, prvi tog tipa na svom hijerarhijskom nivou. To bi značilo npr. "ako je prvi pasus od svih pasusa na tom nivou", što znači da uopšte ne mora da bude zaista baš-baš prvi - dovoljno da je prvi od pasusa. Isto važi i za :last-child, s tim što je u pitanju poslednji element.

Isto važi i za :last-of-type, s tim što je u pitanju poslednji od elemenata tog tipa na tom nivou.

s:first-of-type { [lista deklaracija] } ... <x> <x>...</x> <s>...</s> <s>...</s> <x> <s>...</s> <y>...</y> <s>...</s> </x> </x>

:only-of-type(x)

Selektor sa pseudo-klasom :only-of-type, se primenjuje na element ako je to jedini elemenat tog tipa na tom nivou.

s:only-of-type { [lista deklaracija] } ... <x> <x>...</x> <s>...</s> <s>...</s> <x> <y>...</y> <s>...</s> <y>...</y> </x> </x>

:nth-of-type(x)
:nth-last-of-type(x)

Ok, poslednja komplikacija za danas! Selektor sa pseudo-klasom :nth-of-type(), se primenjuje na element (ili svaki N-ti element) određenog tipa na istom hijerarhijskom nivou. Pseudo-klasa :nth-last-of-type() radi to isto samo što odbrojava od poslednjeg elementa.

s:nth-of-type(odd) { [lista deklaracija] } ... <x> <s>...</s> <s>...</s> <y>...</y> <s>...</s> <s>...</s> </x>

Primer

Evo recimo primera kako da na lak način napravimo tabelu u kojoj je svaki drugi red drugačije obojen.


  table {
    background-color: #ffc;
  }
  tr:nth-of-type(even) {
    background-color: #ffe;
  }

Ako ste se pitali kako bi mogao da izgleda naki malo kompleksniji selektor...


  div.spec:first-of-type:hover {
    /* ovo bi značilo - prvi od DIV elemenata, 
    ali samo ako je klase spec i to kada se pređe mišem preko njega */
  }

  div:first-child:last-child {
    /* ovo bi značilo - DIV element koji je prvi na svom nivou, a 
    takođe i poslednji (sreća da imamo pseudo-klasu :only-child 
    inače bismo morali ovo da koristimo) */
  }

  *:last-child .spec::first-letter {
    /* ovo bi značilo - prvo slovo elementa klase spec koji se nalazi
    u bilo kom elementu koji je poslednji na svom nivou */
  }

Ok, došlo je vreme da malo izbistrimo primer uz današnju lekciju.

  1. Mozilla Developer Network, Pseudo Classes
  2. Tuts+, The 30 CSS Selectors you Must Memorize
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.