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.

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...

Kada pročitate celu lekciju, vratite se na ovaj primer...

: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.

:only-child

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

: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:

• odd - svaki element na neparnoj poziciji, gledano od početka/kraja (prvi, treći, peti...)
• even - svaki element na parnoj poziciji, gledano od početka/kraja (drugi, četvrti, šesti...)
• [X] - samo ako je taj elemenat X-ti elemenat, a kao X se navodi ceo broj (npr. 3 - samo treći element)
• [A]n+[B], gde zadajemo A i B kao cele brojeve, a n će imati vrednosti 0,1,2,3... Primeri:
  • 2n - isto kao even
  • 2n+1 - isto kao odd
  • n+3 - svaki element, ali počev od trećeg (treći, četvrti, peti...)
  • -n+3 - svaki element, ali počev od trećeg pa unazad - efektivno prva/poslednja tri elementa (treći, drugi i prvi)
  • 3n - svaki treći (treći, šesti, deveti...)
  • 3n+1 - svaki treći počev od prvog (prvi, četvrti, sedmi...)

: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.

: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.

: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.

• odd - svaki neparni element tog tipa, gledano od početka/kraja (prvi, treći, peti...)
• even - svaki parni element tog tipa, gledano od početka/kraja (drugi, četvrti, šesti...)
• [X] - samo X-ti po redu elemenat tog tipa, a kao X se navodi ceo broj (npr. 3 - tačno treći element tog tipa koji se javlja)
• [A]n+[B], gde zadajemo A i B kao cele brojeve, a n će imati vrednosti 0,1,2,3... Za detaljnije objašnjenje pogledajte malo iznad za pseudo-klasu :nth-child().

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

  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 */
  }