CSS Level 4 Selektori i sve što bi trebalo da znate

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 …

[css gutter="false"]
ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
color: red;
}
[/css]

…. možemo jednostavno napisati ovako:

[css gutter="false"]
ul.menu li a:matches(:link, :hover, :visited, :focus) {
color: red;
}
[/css]

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

[css gutter="false"]
article:matches(.active, .visible, #important) {
background: red;
}
[/css]

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:

[css gutter="false"]
p:not(.active, .visible) {
color: red;
}
[/css]

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:

[css gutter="false"]
a:link,
a:visited {
color: red;
}
[/css]

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

[css gutter="false"]
a:any-link {
color: red;
}
[/css]

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.

[css gutter="false"]
nav :local-link {
text-decoration: none;
}
[/css]

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:

[css gutter="false"]
:not(:local-link(0)) {
color: red;
}
[/css]

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:

[css gutter="false"]
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;
}
[/css]

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/

2. 2015

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

3. Maj 2015

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

4. 05 Maj 2015

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

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

[css gutter="false"]
p:current {
background: yellow;
}
[/css]

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.

[css gutter="false"]
input.checkbox:indeterminate {
background: #ccc;
}
[/css]

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

CSS4 Rocks

W3C Selectors Level 4