CSS Level 4 Selektori


CSS Level 4 Selektori

Da li browseri podržavaju CSS4?

Većina desktop browsera, osim naravno IE podržavaju CSS4, ali danas kad se pravi web sajt, podrazumeva se da će se tom sajtu pristupati i sa mobilnih uređaja. Većina njih još uvek  ne podržavaju CSS4. Zbog toga upotreba CSS4 u komercijalne svrhe još uvek nije dobra ideja, ali se svakako treba upoznati sa njim, pošto je CSS4 budućnost.

Evo ovde se može proveriti koja svojstva CSS4 podržava vaš browser

CSS4-Selectors

Logički kombinatori :matches, :not

Počećemo od logičkih pseudoklasa. Prve :matches se možda sećate iz mozilla :-moz-any().  koja je implementirana još davno u firefox-u 4. Zahvaljujući ovom selektoru, možemo grupisati i uporediti neka stanja u našem CSS dokumentu. Zašto je ovo korisno? Evo jednog konkretnog primera koji daje odgovor na ovo pitanje. Umesto ovoga …

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
  color: red;
}

…. možemo jednostavno napisati ovako:

ul.menu li a:matches(:link, :hover, :visited, :focus) {
  color: red;
}

Jednostavno, zar ne? Iako ovaj primer deluje banalno, on zapravo pokazuje moć :matches pseudoklase, koja može biti upotrebljena i za mnogo kompleksnije situacije:

article:matches(.active, .visible, #important) {
  background: red;
}

Drugi logički kombinator koji je zapravo uveden u CSS3 specifikaciji, ali je postao još moćniji u level 4. Reč je o :not, pseudoklasi za negaciju, koja sada može sadržati listu selektora kao parametre:

p:not(.active, .visible) {
  color: red;
}

Kod iznad će primeniti crvenu boju na sve paragrafe koijima nisu dodeljene active i visible klase.

 

LOCATION PSEUDO-CLASSES: :ANY-LINK, :LOCAL-LINK

Zahvaljujući location pseudoklasama, imaćemo više kontrole za stilizovanje linkova. Prvi :any-link (to mu je privremeno ime, koje će se možda menjati u budućnosti), skuplja definicije a:link i a:visited u jednu, tako da ih nećete morati pisati posebno:

a:link,
a:visited {
  color: red;
}

Sada nije bitno da li je link posećen, ili nije. Biće stilizovan na isti način.

a:any-link {
  color: red;
}

Druga pseudoklasa, :local-link, je još interesantnija. Mogli bi naprimer zadati različite stilove linkovima koji ciljaju početnu stranicu, a da ostali ostanu netaknuti.

nav :local-link {
  text-decoration: none;
}

Zahvaljujući ovoj liniji CSS-a, linkovi koj pokazuju na trenutnu stranicu neće imati text-decoration stil, tako će izgledati drugačije od ostalih sa menija.

Evo još jednog primera:

:not(:local-link(0)) {
  color: red;
}

Ovo znači da će na sve eksterne linkove biti primenjena crvena boja. :local-link može prihvatiti parametar. Broj koji se nalati u zagradi označava nivo URL putanje, npr:

nav :local-link(0) {
  color: red;
}
nav :local-link(1) {
  color: green;
}
nav :local-link(2) {
  color: blue;
}
nav :local-link(3) {
  color: yellow;
}
nav :local-link(4) {
  color: gray;
}

Recimo da je ovo trenutna adresa http://neki-sajt.com/2015/05/20/neki-naslov/ i da postoje ovi linkovi:

1. Početna

http://neki-sajt.com/

  1. 2015

http://neki-sajt.com/2015/

  1. Maj 2015

http://neki-sajt.com/2015/05/

  1. 05 Maj 2015

http://neki-sajt.com/2015/05/20/

  1. Članak

http://neki-sajt.com/2015/05/20/neki-naslov/

prvi link će biti obojen u crveno, drugi u zeleno, treći u plavo, zatim u žuto i sivo.

 

Vremenske pseudo-klase: :past, :current, :future

Ove pseudo-klase su prilično zgodne za korisnike čitača ekrana. Sa samo jednom linijom CSS-a mogu se zadati različiti stilovi.

p:current {
  background: yellow;
}

Ovo će osvetliti reč koja se izgovara u žutu boju.

 

UI STATE PSEUDO-CLASS: :INDETERMINATE

UI elementima za online forme se mogu zadati interesantne pseudo-klase poput :enabled, :disabled ili :checked, postoji i jedna nova : :indeterminate. Kao što verovatno znate, checkbox-ovi  i radio dugmad imaju dva stanja, ili su checked ili unchecked. To može biti postignuto upotrebom pseudo-klase :checked i :not. Ali šta ako želite da stilizujete kontrole koje nisu bile upotrebljavane, njihovo stanje je neodređeno. Možemo zadati stilove i za ova polja čija se stanja nisu menjala.

input.checkbox:indeterminate {
  background: #ccc;
}

Evo nekoliko sjajnih izvora gde se možete detaljnije upoznati sa selektorima nivoa 4:

CSS4 Rocks

W3C Selectors Level 4

 

 

Kosta Tošić

SEO / Internet marketing specialist at PopArt Studio

Latest posts by Kosta Tošić (see all)

facebook
twitter
google
pinterest