Definitivni vodič za CSS pseudo-klase
Bez obzira jeste li početnik ili iskusni CSS programer, vjerojatno ste čuli pseudo-klase. Najpoznatija pseudo-klasa je vjerojatno : hover, što nam omogućuje da stiliziramo element kada je u stanju lebdjenja, tj. kada je pokazivački uređaj, kao što je miš, usmjeren na njega.
Slijedeći koncept naših prethodnih postova na margini: auto i CSS Floats, bliže ćemo detaljnije pogledati pseudo-klase u ovom postu. Vidjet ćemo što su zapravo pseudo-klase, kako oni rade, kako ih možemo kategorizirati, i kako se razlikuju od pseudo-elemenata.
Što su pseudo-klase?
Pseudo-klasa je ključna riječ koju možemo dodati CSS selektorima kako bi definirati posebnu državu pripadnog HTML elementa. Možemo dodati pseudo-klasu CSS selektoru korištenjem sintaksa dvotočke : kao ovo: a: hover …
CSS klasa je atribut koji možemo dodati u HTML elemente za koje želimo primijeniti ista pravila za stil, kao što su gornje stavke izbornika ili naslovi widgeta na bočnoj traci. Drugim riječima, možemo koristiti CSS klase grupirati ili klasificirati HTML elemente slične ili slične.
Pseudo-klase su im slične u smislu da su također koristi se za dodavanje pravila stila elementima koji dijele istu karakteristiku.
Ali dok su istinski klase korisnik definiran i može se uočiti u izvornom kodu, na primjer posao redovitih CSS klasa je na klasificirati ili grupirati elemente. Programeri znaju kako se njihovi elementi grupiraju: oni mogu oblikovati klase kao što su "stavke izbornika", "gumbi", "sličice", itd. U grupu, a kasnije i slične elemente. Te se klasifikacije temelje na karakteristikama elemenata koji su koje su dali sami programeri. Na primjer, ako se programer odluči koristiti a HTML elementi ipak imaju svoje zajedničke karakteristike na temelju njihovog stanja, položaja, prirode i interakcije s stranicom i korisnikom. To su karakteristike koje su ne obično su označeni u HTML kodu, ali možemo ciljajte ih pseudo-klasama u CSS-u, na primjer: To su karakteristike koje su općenito usmjerene na pseudo-klase. Da bismo bolje razumjeli razliku između klasa i pseudo-klasa, pretpostavimo da koristimo klasu Ove posljednje podređene elemente možemo stilizirati sljedećim CSS-om: Ali što se događa kada se posljednji element promijeni? Pa, morat ćemo premjestiti Ova gnjavaža klase ažuriranja mogu se prepustiti korisničkom agentu, barem za one karakteristike koje su uobičajene među elementima (a što je posljednji element je uobičajen kao što se može dobiti). Nakon što je unaprijed definiran Postoji mnogo vrsta pseudo-klasa, sve nam pružaju načine za ciljanje elemenata na temelju njihovih značajki koje su inače nedostupne ili teže pristupiti. Evo popisa standardnih pseudo klasa u MDN-u. Dinamičke pseudo-klase dodaju se i uklanjaju iz HTML elemenata dinamički, na temelju stanja u koje prelaze kao odgovor na korisnikove interakcije. Neki od primjera dinamičkih pseudo-klasa su Državne pseudo-klase dodaju se elementima kada su u određenom statičkom stanju. Neki od najpoznatijih primjera su: Najpopularnija državna pseudo-klasa mora biti Strukturne pseudo-klase klasificiraju elemente na temelju njihovoj poziciji u strukturi dokumenta. Njezini najčešći primjeri su Postoje i razne pseudo-klase koje je teško klasificirati, kao što su: Jedna od najtežih stvari o pseudo-klasama je vjerojatno razumjeti razliku između Obje su strukturne pseudo-klase i označavaju određeni element unutar nadređenog elementa (kontejner), ali na drugačiji način. pretpostaviti n onda je 2 Pogledajmo primjer. Pogledajmo kako ovaj kratki CSS oblikuje HTML u dva različita slučaja. U slučaju 1, drugi element unutar a Ali ako je roditelj element se imati drugi stavak U našem primjeru Stavak 1, Dijete 1 Stavak 2, Dijete 3 U drugom slučaju pomičemo neuređeni popis na treće mjesto, a drugi paragraf će doći prije njega. To znači da oboje Stavak 1, Dijete 1 Stavak 2., Dijete 2 Ako želite pročitati više o razlikama između Kada govorimo o pseudo-klasama, također je važno razumjeti kako se razlikuju od pseudo-elemenata, kako ih ne bi pomiješali. Ali dok koristimo pseudo-klase za odabir HTML elemenata postoje u stablu dokumenta samo što nisu posebno označene, pseudo-elementi nam omogućuju da ciljamo elemente inače ne postoje u DOM-u, ili uopće (npr Tu je i a razlika u sintaksi. Pseudoelementi se općenito identificiraju s dvostrukim kolonama To može dovesti do konfuzije kao u CSS2, pseudo-elementi su označeni s jednim dvotočkom, a preglednici još uvijek prihvaćaju sintaksu s jednim dvotočkom za pseudo-elemente. Također postoje razlike između pseudo-klasa i pseudo-elemenata u način na koji ih možemo ciljati pomoću CSS-a. Pseudo-elementi mogu se pojaviti samo nakon redoslijed selektora, dok pseudo-klase mogu biti postavljene bilo gdje u CSS selektorskom nizu. Na primjer, možete ciljati posljednju stavku popisa elementa popisa ILI Prvi slijed selektora odabire posljednje dijete unutar Pokušajmo učiniti nešto slično s pseudo-elementima. Gornji CSS kod je valjan i pojavit će se tekst "crveno" nakon Ovaj kod, s druge strane, neće raditi, kao mi ne može promijeniti položaj pseudo-elementa unutar redoslijeda odabira. Također, samo jedan pseudo-element može se pojaviti pored selektora, dok pseudo-klase mogu se međusobno kombinirati ako kombinacija ima smisla. Na primjer, za ciljanje prvih podređenih elemenata koji su također samo za čitanje, možemo stvoriti kombinaciju pseudo-klasa Kôd selektora s a Važno je to znati ovi su ne CSS pseudo-klase koje cilja jQuery. Nazivaju se jQuery ekstenzije selektora. JQuery ekstenzije izbornika vam omogućuju ciljati HTML elemente jednostavnije ključne riječi. Većina njih su kombinacije više normalnih CSS selektora, koji su predstavljeni jednom ključnom riječi.Svrha pseudoklasa
.posljednji identificirati posljednje elemente u različitim roditeljskim spremnicima.
li.last text-transform: velika slova; option.last font-style: italic;
.posljednji klasa od prethodnog posljednjeg elementa do trenutnog.:zadnje dijete pseudo-klase doista je vrlo korisno. Ovuda, mi ne morate označavati posljednji element u HTML-kodu, ali još uvijek ih možemo oblikovati sljedećim CSS-om: li: posljednje dijete text-transform: velika slova; opcija: zadnje dijete font-style: italic;
Glavne vrste pseudoklasa
1. Dinamičke pseudo-klase
: hover, :fokus, :veza, i : posjetio, sve se može dodati u sidrena oznaka. a: posjećeno color: # 8D20AE; .button: hover, .button: focus font-weight: bold;
2. Pseudo-klase na temelju države
Isprobali koji se može primijeniti za potvrdne okvire ():puni zaslon za ciljanje bilo kojeg elementa koji se trenutno prikazuje u načinu cijelog zaslona:onemogućeno za elemente HTML koji mogu biti u onemogućenom načinu, kao što je , , i . Isprobali, koja označava je li potvrdni okvir označen ili nije. .potvrdni okvir: označeno + oznaka font-style: italic; ulaz: onemogućen background-color: #EEEEEE;
3. Strukturne pseudo-klase
: Prvo dijete, :zadnje dijete, i : N-ti-dijete (n) - sve se može koristiti za ciljanje određenog dječjeg elementa unutar spremnika na temelju njegovog položaja - i :korijen koja cilja nadređeni element najviše razine u DOM-u. 4. Razni pseudoklasi
: Nije (x) koja odabire elemente koji ne odgovaraju selektoru x: Lang (jezik-code) koji odabire elemente čiji je sadržaj na određenom jeziku: Dir (usmjerenost) koji odabire elemente sa sadržajem određene smjera (s lijeva na desno ili s desna na lijevo). p: lang (ko) pozadinska boja: # FFFF00; : root pozadinska boja: # FAEBD7;
n-ti-dijete vs druge vrste Pseudo-klase
: N-ti-dijete i : N-ti-o tipu pseudo-klase.: N-ti-za dijete (n) cilja element koji je drugo dijete roditeljskog elementa, i : N-ti-o-tipa (n) ciljevi drugi među istog tipa elementa (kao što su paragrafi) unutar nadređenog elementa. / * paragraf koji je ujedno i drugo dijete unutar roditeljskog elementa * / p: nth-child (2) color: # 1E90FF; // lightblue / * drugi stavak unutar roditeljskog elementa * / p: nth-of-type (2) font-weight: bold;
Slučaj 1
n-ti-dijete (2) pravilo se neće primjenjivati na njega. Iako je drugo dijete, jest ne stavka. n-ti-o-tipa (2) Pravilo će se primjenjivati, jer ovo pravilo traži samo drugih elemenata i ne brine za druge vrste elemenata (kao što su neuređeni popisi) unutar nadređenog elementa.n-ti-o-tipa (2) Pravilo će oblikovati drugi stavak koji je dijete 3.
Neuređeni popis 1, dijete 2
Slučaj 2
: N-ti-dijete (2) i : N-ti-o-tipa (2) primjenjivat će se pravila, budući da je drugi stavak i drugo dijete roditelja
Neuređeni popis 1, dijete 3
: N-ti-od-dijete i : N-ti-o tipu pseudo-klase, CSS Tricks ima veliki post na njemu. Ako koristite SASS, Family.scss vam može pomoći u stvaranju kompliciranog n-ti-dijete'elemenata.Pseudo-klase vs pseudoelementi
Pseudo-elementi, kao što su ::prije i ::nakon (pogledajte ovaj vodič o tome kako ih koristiti) koje su dodali korisnički agenti, i mogu biti ciljani i oblikovani pomoću CSS-a kao i pseudo-klase. ::prije i ::nakon) ili samo kao određeni dijelovi postojećih elemenata (npr ::prvo slovo ili ::rezerviranog mjesta). ::, dok su pseudo-klase identificirane s jednim dvotočkom :.1. Njihovo mjesto u nizu CSS selektora
ul>: last-child.red boja: # B0171F;
ul> .red: posljednje dijete boja: # B0171F;
.Crvena) a drugi odabire posljednje dijete među elementima koji posjeduju .Crvena klasa unutra ul> .red :: after display: block; sadržaj: "crveno"; boja: # B0171F;
stavke s razredom .Crvena. ul> :: after.red display: block; sadržaj: "crveno"; boja: # B0171F;
2. Broj pojavljivanja u redoslijedu odabira
: Prvo dijete i :samo za čitanje na sljedeći način: : prvo dijete: samo za čitanje color: #EEEEEE;
JQuery ekstenzije izbornika
: Sintaksa ne predstavlja uvijek pravi CSS pseudo-klasu. Ako ste ikada koristili jQuery, možda ste koristili mnoge njegove selektore : sintaksu $ ( ': Okvir'), $ ( ': Ulaz') i $ ( ': Odabran'). / * Promjena fonta svih HTML elemenata povezanih s unosom, kao što su gumb, odabir i unos * / $ (": input") .css ("font-family", "courier new")
