Sadržaj
- Birači s jednim elementom
- Lanci selektora specifični za količinu
- Dinamični rasporedi specifični za količinu
- Zaključak
U ovom ćemo uputstvu pogledati načine mijenjanja CSS stilova elemenata, kao i naizgled oblikovanje njihovih roditelja, ovisno o broju elemenata. Također ćemo vidjeti kako promijeniti izgled elemenata na temelju njihove količine, kako bismo stvorili prilagodljiviji izgled web stranice koji bolje koristi prostor.
- CSS trikovi za revoluciju u vašim web izgledima
Na kraju ćemo pokriti upotrebu CSS brojača za prikaz indeksa elementa unutar skupa unutar njega, kao i prikaz ukupnog broja unutar roditelja. Sve to postići će se samo s čistim CSS-om, bez potrebe za JavaScriptom ili okvirima, što dovodi do jednostavnog i učinkovitijeg koda.
Da biste izradili web mjesto bez potrebe za beskrajnim kodom, trebat će vam graditelj web stranica. Bez obzira na mogućnosti vaše web lokacije, osigurajte da vaša usluga web hostinga odgovara svojoj svrsi. Ako želite nešto drugačije, pripremite svoju pohranu u oblaku.
Birači s jednim elementom
CSS3 ima samo jedan par selektora koji mogu odrediti količinu elemenata, naime selektori: only-child i: only-of-type selektori. Rekavši to, oni zapravo mogu samo utvrditi je li neki element sam ili ima braću i sestre. Odabir: only-child podudara se s elementima koji su jedino dijete njihovog roditelja, dok:: only-type odgovara elementima koji su jedini od njihovog tipa.
Nažalost, to se tiče pojedinih selektora, ali postoji nekoliko drugih selektora koji mogu ciljati elemente na temelju njihovog redoslijeda u skupu sličnih elemenata. To su: nth-child, nth-of-type, nth-last-child i nth-last-of-type, koji se obično koriste za ciljanje elemenata na temelju njihovog redoslijeda u skupu sličnih elemenata. Selektori: nth-last-child i nth-last-of-type koriste se za određivanje redoslijeda elemenata koji se broje unatrag od zadnjeg elementa do prvog. Kombinirajući ih s drugim selektorima omogućuje nam izgradnju složenijih lanaca koji ciljaju određene elemente na temelju njihove količine.
Lanci selektora specifični za količinu
Od četiri gore navedena selektora, glavni koji ćemo koristiti u ovom vodiču je nth-last-of-type. Razlika između ovog i selektora n-tog posljednjeg djeteta je u tome što potonji uključuje braću i sestre svih elemenata u skupu, dok prvi uključuje samo elemente iste vrste HTML-a i stoga je selektivniji. Za ostatak ovog tutorijala koristit ćemo selektore tipa, međutim, varijante -child jednako vrijede.
N-ti-zadnji-tip može se koristiti zajedno s popularnijim selektorima prvog tipa za stvaranje lanca koji cilja prvi element u skupu željene količine. Na primjer, možemo koristiti: first-of-type: nth-last-of-type (3) za ciljanje elemenata koji su i prvi i treći s kraja njihovog tipa ili, drugim riječima, prvi od skup od tri. Zatim to možemo proširiti pomoću opće kombinacije braće i sestara ~ kako bismo odabrali svu braću i sestre koji slijede prvu od tri skupine. Kombinirajući ova dva lanca selektora, možemo stvoriti složeni selektor koji cilja elemente koji su prvi od tri i sve elemente iste vrste koji ga slijede, odabirući tako sve elemente u skupu od tri.
.kutija: prvi-tip: n-ti-zadnji-tip-(3), .kutija: prvi-tip: n-ti-zadnji-tip (3) ~ .kutija
Ovaj lanac selektora ne samo da radi za određeni broj elemenata, već se čak može i modificirati kako bi ciljao raspon veličina.
Ako želimo ciljati elemente u skupu s količinom većom ili manjom od određene vrijednosti m, možemo koristiti lanac s tehnikama (n + m) i (-n + m). Na primjer, za ciljanje svih elemenata u skupu od dva ili više elemenata možemo koristiti:
.kutija: prvi-tip: n-ti-zadnji-tip (n + 2), .kutija: prvi-tip: n-ti-zadnji-tip (n + 2) ~ .kutija
Slično tome, možemo ciljati sve elemente u skupu od dva ili manje elemenata pomoću:
.kutija: prvi-tip: n-ti-zadnji-tip (-n + 2), .kutija: prvi-tip: n-ti-zadnji-tip (-n + 2) ~ .kutija
Kao što vidite, ovo je moćan selektorski lanac koji nam omogućuje postizanje vrlo zanimljivih i korisnih stvari bez potrebe za JavaScriptom ili drugim okvirima. Posebno je korisno kada je u pitanju stvaranje prilagodljivih izgleda koji se mijenjaju na temelju broja elemenata.
Dinamični rasporedi specifični za količinu
Recimo da želimo prikazati skupinu okvira koji prikazuju rezultate pretraživanja ili API poziva u dvostrukom rasporedu mreže. Problem leži u činjenici da rezultati dolaze iz vanjskog izvora i mi nikako ne možemo znati broj rezultata koji će se vratiti, stoga ne znamo koliko će okvira biti stvoreno. Iako mreža izgleda sjajno za paran broj kutija, kad se primijeni na neparan broj, zadnji okvir sjedi sam u redu i izgleda ... dobro, nekako čudno.
To je posebno problematično kada se na njih koriste stavke flexbox s primijenjenim flex-grow, jer posljednji element raste u prazan prostor u redu, zauzimajući pritom punu širinu. Jedan od načina da se to spriječi može biti postizanje da prvi od neparnog broja okvira zauzme puni redak primjenom širine 100% na prve okvire koji su ujedno i neparan broj okvira s kraja, koristeći: first-child: n-ti-zadnji-tip (neparan). To osigurava bolji izgled jer prvom i, prema tome, najrelevantnijem ili nedavnom rezultatu daje veću važnost od zadnjeg.
Možemo čak dodati i poseban slučaj kada je količina djeljiva s tri pomoću: first-child: nth-last-of-type (3n) da transformiramo mrežu u raspored s tri stupca primjenom širine od 33% na prvi kutije u skupu s količinom djeljivom s tri i sve kutije koje slijede.
.box {širina: 50%; } .kutija: prvo dijete: n-ti-zadnji-tip (neparan) {širina: 100%; } .box: first-child: nth-last-of-type (3n), .box: first-child: nth-last-of-type (3n) ~ .box {width: 33%; }
Zaključak
Kao što smo vidjeli, CSS selektori mogu biti povezani lancima na razne zanimljive načine kako bi se primijenili stilovi i prilagodljivi izgledi koji se mijenjaju na temelju količine elemenata. Lanci selektora također se mogu koristiti za naizgled primjenu stilova na roditelja skupa elemenata određene količine, pomoću pseudo-elemenata :: before ili :: after koji su postavljeni da zauzimaju punu veličinu roditelja. U kombinaciji s CSS brojačima, ovi se pseudo-elementi mogu koristiti za prikaz ukupnog broja potomaka u nadređenom elementu, kao i teksta koji se mijenja ovisno o količini potomaka.
Te tehnike nude dragocjen način stvaranja dinamičkih, kvantitativno zasnovanih stilova i rasporeda koji su korisni pri rukovanju nepoznatim brojem elemenata, što je čest slučaj kada se radi s API-jevima.
Ovaj je članak izvorno objavljen u broju 308 od neto, najprodavaniji svjetski časopis za web dizajnere i programere. Kupite izdanje 308 ovdje ili pretplatite se ovdje.
