Pogled u CSS3 prvi izbor strukturnih elemenata

Ovaj članak je dio našeg "Serija vodiča za HTML5 / CSS3" - posvećeni pomoći da postanete bolji dizajner i / ili programer. Kliknite ovdje da biste vidjeli više članaka iz iste serije.

Jedna stvar koju volim kod CSS3 je novi dodatak selektora koji nam omogućuje da ciljamo elemente posebno bez oslanjanja na klasa, iskaznica ili neki drugi atribut elementa, a onaj koji ćemo pokriti ovdje je sljedeći selektor, : Prvi od tipa.

: Prvi od tipa selektor će ciljati prvo dijete navedenog elementa, na primjer, isječak ispod će ciljati prvi h2 na web stranici.

 h2: / * deklaracija stila prvog tipa / * 

: Prvi od tipa također je jednako : N-ti-o-tipa (1), umjesto odabira samo prvi tipa, možemo dalje odabrati drugu, treću i tako dalje. Sljedeći isječak ciljat će se na drugi h2 na web-stranici.

 h2: nth-of-type (2) / * deklaracija stila * / 

: Prvi od tipa” vs. “: Prvo dijete”

Može se činiti da ta dva selektora rade istu stvar, ali to nije slučaj. Pogledajmo sljedeću demonstraciju:

Recimo da imamo pet elemenata stavka u okviru div, kao ovo:

 
 
Pragraf 1
 
2
 
3
 
4
 
5
 
 

Sada bismo željeli odabrati prvi odlomak koristeći : Prvo dijete selektor.

 p: prvo dijete padding: 5px 10px; granični radijus: 2px; pozadina: # 8960a7; boja: #fff; granica: 1px solid # 5b456a;  

Kao što smo i očekivali, prvi je stavak uspješno odabran.

• : Demo za prvo dijete

Međutim, kad mi dodajte drugi element prije prvi stavak, recimo h1, poput donjeg isječka:

 
 
Naslov 1
 
Pragraf 1
 
2
 
3
 
4
 
5
 
 

prvi stavak neće biti odabran, kao prvo dijete unutar div je više nije paragraf, ali sada je h1.

Dakle, ovo je situacija u kojoj : Prvi od tipa izbornik dolazi riješiti problem.

 p: prvi-od-tipa padding: 5px 10px; granični radijus: 2px; pozadina: # a8b700; boja: #fff; granica: 1px solid # 597500;  

• : Demo prve vrste

“Posljednji” Selektor

Gdje je “prvi”, tada će također biti “posljednji”.

Poleđina dvaju selektora o kojima smo raspravljali gore su dva selektora; :zadnje dijete i : Posljednji od tipa. Oni su u osnovi isti kao i prethodna dva, osim što ciljaju posljednje dijete navedenog elementa.

Na primjer, ovaj isječak u nastavku cilja posljednji stavak unutar dijela.

 p: posljednje dijete padding: 5px 10px; granični radijus: 2px; pozadina: # 8960a7; boja: #fff; granica: 1px solid # 5b456a;  

• : demo posljednjeg djeteta

I ovaj isječak će također ciljati posljednji stavak u istoj situaciji kao što smo već spomenuli; ovaj put

slijedi izravno drugi element.

 p: last-of-type padding: 5px 10px; granični radijus: 2px; pozadina: # a8b700; boja: #fff; granica: 1px solid # 597500;  

• : Demo posljednjeg tipa

Selectivizr

Kao i sve druge nove značajke u CSS3, ovi selektori uglavnom nisu podržani u starim preglednicima Internet Explorer 6 do 8, s iznimkom za : Prvo dijete selektor, kao što je dodan nakon CSS2.1. Njegova relativna :zadnje dijete dodan je samo u CSS3.

Dakle, ako su svi ovi selektori koje smo ovdje spomenuli doista potrebni za vaš webit, možete koristiti pozvanu JavaScript knjižnicu Selectivizr emulirati funkcionalnost CSS3 selektora.

Selectivizr ovisi o drugim JavaScript knjižnicama kako bi mogli raditi, kao što su jQuery, Dojo, Prototype i MooTools; i gledajući iz usporedne tablice na službenim stranicama, čini se da MooTools može obraditi sve selektore.

Dakle, uključimo ga zajedno sa Selectivizrom, kako slijedi:

Gornji uvjetni komentar osigurat će da se te knjižnice učitavaju samo u pregledniku Internet Explorer 8 i niže.

Konačno, možete pogledati demo sa sljedećih linkova i sada bi trebao raditi u modernim i starim preglednicima (IE8 i niže). Također možete preuzeti izvornu datoteku za daljnje ispitivanje. Uživati.

• Demo
• Preuzimanje izvora