Kako funkcioniraju pseudo-klase CSS-a, objašnjeno s kodom i puno dijagrama

Budimo iskreni - postoje slučajevi kad vam CSS može zaista nauditi mozak. Teško je centrirati element unutar roditelja.

Danas ćemo imati smisla za još izazovniji aspekt CSS-a: pseudo-klase.

Obvezni gif obitelji CSS

Pseudo-klase koje ću ovdje pokriti dolaze u dva ukusa.

  • * -sektori za odabir
  • * -delekteri

Možda mislite: "Ali ja sam ovdje da učim pseudo klase. Zašto govorimo o selektorima? "Pa, to su u osnovi iste stvari i ja ću koristiti ove izraze naizmjenično.

Pseudo-klase je ponekad teško shvatiti, uglavnom zato što su prikazane apstraktno. Stoga ću ovdje zauzeti drugačiji pristup i pomoći vam da to shvatite crtajući DOM stablo.

Oznaka i stablo

Prvo pogledajte ovaj blok HTML-a. Koristit ću ovaj kôd u svim svojim primjerima.


  
      Unutarnja veza 1       Unutarnja veza 2      

Sada ću ovaj kôd pretvoriti u nešto vizualnije i intuitivnije: stablo.

Sljedeći element tijela ima 3 djece,. Glavnu mrežu i dva elementa za sidrenje.


  
   ...       Vanjska veza 1    Vanjska veza 2

Evo kako izgleda odnos tijela i njegovo troje djece kada ga predstavljate kao stablo:

Sl. 1

Treba imati na umu da je redoslijed postavljanja djece u drvo važan. Djeca smještena od vrha prema dnu kodova smještaju se lijevo desno u stablo.

Zatim pogledajmo .main div:

    Unutarnja veza 1     Unutarnja veza 2    

.maj ima 4 djece. Prva dva su sidreni elementi, zatim ul, a zatim opet sidreni elementi.

Sl. 2

Slično tome, smanjujemo svaku razinu gniježđenja i izvlačimo cijelo stablo iz HTML koda.

Slika 3 - Stablo HTML koda

Da bi ovaj članak donio bilo kakvo voće za vas, važno je da razumijete ovo stablo.

"Ha ha nice pun!"

Pseudo-klasa # 1: samo-vrste

Sve pseudo-klase slijede isti format:

što želite odabrati: filtrirati {/ * stilove * /}

ono što želite odabrati možete upotrijebiti za odabir svega što postoji kao zbirka u DOM-u. Evo, dopustite mi da nastavim i pokazujem vam primjer:

a: samo tipa {
  obrub: 2px kruta crna;
}

U isječku koda prikazanom gore, elementi koje želite da odaberete su elementi sidrenja (oznaka), a filter je samo vrste. Videćemo za trenutak što ovaj selektor radi.

Prvo, postavila sam kodeks za vas ako ste previše lijeni za izradu projekta za testiranje. Nema na čemu, prijatelju!

Možete pratiti dalje, vidjeti promjene, zbuniti se, a zatim se vratiti ovom članku radi objašnjenja. Učini svoj dio, ja ću učiniti svoje.

Evo, ja radim svoj dio, objašnjavam kôd prikazan gore. Započet ćemo odabirom svega što postoji, a zatim na kraju filtrirati.

Slika 4 - odabir svega

Primijetite kako je izvršen odabir? Svaki odjeljak u stablu (numeriran od 1 do 5) ima elemente s zajedničkim roditeljem. Roditelj Odjeljka 1 je tijelo, roditelj Odjeljka 2 je. Glava, i tako dalje. Još jednom primijetite da svaki odjeljak odgovara razini dublje u gniježđenju koda.

Zatim, budući da su elementi za sidrenje ono što vi želite-izabrati, učinit ćemo upravo to:

Sl. 5 - odabir elemenata sidra

Odabrali smo sve elemente sidra u svakom odjeljku i numerirali ih uzastopno slijeva nadesno. I spomenuo sam, važan je red - slijeva udesno.

Ovdje završava ono što želite-odaberite dio i filtriranje započinje.

Sl. 6 - Odabir samo sidrenih elemenata tipa.

samo tip prelazi svaki odjeljak i odabire samo one elemente sidra koji su jedini element sidra u njihovom odjeljku. Primijetite kako su odjeljci 3, 4 i 5 jedini odjeljci s elementima sidra? Kao što prikazuje slika 6., oni su odabrani i deklarirani kad se stil primijeni.

Pseudo-klasa # 2: prva vrsta

Brzo naprijed do dijela u kojem smo završili s odabirom svih „što-što želiš odabrati“ (elemente sidrenja u našem slučaju).

Sl. 7 - Odabir samo elemenata sidra.

Filter prvog tipa znači da u svakom od odjeljaka odabire samo prvu pojavu elementa sidra.

Sl. 8 - Odabir elemenata za sidrenje prvog tipa.

Evo kako izgleda kôd koji ovo postiže:

a: prva vrsta {
  obrub: 2px kruta crna;
}

U slučaju da ste zaboravili naporan posao koji sam učinio za vas prilikom postavljanja CodePen-a, evo još jedne veze kako biste provjerili što kôd prikazuje u pregledniku.

Pseudo-klasa # 3: zadnji tip

Ako ga ne možete prepoznati po nazivu, last-of-type je upravo suprotno od tipa prvog. Što, dakle, znači da u svakom odjeljku stabla, umjesto odabira prve pojave, odaberite posljednje.

Slika 9 -: ​​zadnji odabrani tipovi

"Što je sa presjecima sa samo jednim elementom sidra?", Nije baš drago što ste postavili to pitanje. Sasvim je jednostavno vidjeti ima li odjeljak samo jedan sidreni element, očito prolazi filtar jedinog tipa, ali ne samo to. Kako nema elemenata sidra koji prethode ili slijede tu određenu oznaku, ona također prolazi i filtre prvog i zadnjeg tipa (npr. Oznake, odjeljak 4 i 5).

Pseudo-klasa # 4: nth-of-type (broj / an + b / par / nepar)

I sad smo konačno zagrizli u sočan dio članka, tu je jednostavan CSS s nekoliko dodataka iz matematike petog razreda, nadam se da ćete uživati ​​u njemu.

Za početak navedimo sljedeći stil.

a: nth-of-type (1) {
  obrub: 2px kruta crna;
}

Izgleda pomalo zagonetno, ali zaista je jednostavno. Da biste pročitali selektor, jednostavno uzmite broj iz zagrada i zamijenite nth u nazivu selektora rednim oblikom tog broja. Iskreno, to je još jedna engleska riječ za vas ...

U redu vraćajući se, a: nth-of-type (1) može se, dakle, čitati kao: prvo-tipa i ne čudi da djeluje točno poput: prvo-vrste i rezultira odabirom elemenata kao što je prikazano u nastavku ; samo elementi sidrenja koji su prvi tipovi u odgovarajućem odjeljku.

Slika 10 - Čitaju li ih ljudi čak?

Pa to je u redu i fino, ali pokušajmo ovdje nešto drugačije.

a: n-tipa (0) {
  obrub: 2px kruta crna;
}

Ako ste dobro pogodili, za što sam siguran da niste, u ovom se slučaju ne odabiru elementi sidra. Kako brojanje vrsta (i djece kao što ćemo vidjeti) u svakom odjeljku počinje s 1, a ne od 0, u bilo kojem odjeljku nema sidrenih elemenata "0", pa stoga: zeroth of type ne odabire ništa. I tako će biti slučaj za: nth-of-type (5) ili a: nth-of-type (6/7/8) jer ne postoje a: peti-tip ili a: šesti / sedmi / osmog tipa u bilo kojem od odjeljka.

Ali ako nastavimo i iskoristimo ...

a: nth-of-type (2) {
  obrub: 2px kruta crna;
}

… Sasvim su jasno da odjeljci 1 i 2 imaju elemente za sidrenje drugog tipa i stoga su oni odabrani.

Sl. 11 -: nth-of-type (2) ili čitati kao: drugog tipa

Slično tome, samo da bismo pojačali točku ovdje, ako nastavimo i proglasimo sljedeći stil,

a: n-ti tipa (3) {
  obrub: 2px kruta crna;
}

odabrat će treće elemente sidra u drugom odjeljku, jer je odjeljak 2 jedini odjeljak s: elementom sidra treće vrste.

Sl. 12 -: n-ti tipa (3) ili se čita kao: trećeg tipa

Nije tako jednostavno? Ali brojevi nisu jedino što možete prenijeti u: nth-of-type (...), ovaj je blok snažniji od toga, možete proslijediti i u formulama oblika (a * n) + b (ili radi sažetka an + b). Gdje su a i b konstante i n je vrijednost> = 0. Kako vam se svidio Math topping sir? ne brini, sve će to imati smisla u sekundi.

Razmislite o sljedećem stilu

a: nth-of-type (n) {obrub: 2px kruta crna; }

Formula koja je poslana u gornjem izborniku je (1 * n) + 0 [= n], a je 1, b je 0 i n je dobro, n. Ono što se događa sljedeće je počevši od 0 da se brojčana vrijednost n postupno priključi u formulu i vrši se odabir. Stoga se a: nth od tipa (n) u osnovi prevodi na

a: nth-of-type (0) {obrub: 2px kruta crna; } // n = 0
a: nth-of-type (1) {obrub: 2px kruta crna; } // n = 1
a: nth-of-type (2) {obrub: 2px kruta crna; } // n = 2
a: nth-of-type (3) {obrub: 2px kruta crna; } // n = 3
a: nth-of-type (4) {obrub: 2px kruta crna; } // n = 4
...

Iz toga proizlaze svi elementi sidra.

Razmotrimo još jedan primjer

a: nth-of-type (2n + 1) {obrub: 2px kruta crna; }

Polazeći od 0 i postupno uključivanjem vrijednosti n u formuli generira sljedeće odabire.

// n = 0 podrazumijeva (2 * 0) + 1 = 1
a: nth-of-type (1) {obrub: 2px kruta crna; }
// n = 1 podrazumijeva (2 * 1) + 1 = 3
a: nth-of-type (3) {obrub: 2px kruta crna; }
// n = 2 podrazumijeva (2 * 2) + 1 = 5 - Nema odabira jer nijedan peti tip nije prisutan ni u jednom odjeljku
a: nth-of-type (5) {obrub: 2px kruta crna; } ...
Slika 13 - n-tipovi (2n + 1) odabira

Osim brojeva i formula koje generiraju brojeve, možete prelaziti u neparne ili neparne nizove. čak odabire sve parne pojave elemenata određenog tipa u odjeljku, tj.: drugi tip: četvrti tip: šesti tip itd., a s druge strane očito: nth-of-type (neparno) odabire sve neobične pojave, tj.: prvog tipa,: treće vrste,: pete vrste itd.

Pseudo-klasa # 5: nth-the-last-of-type (broj / an + b / par / nepar)

Ovaj izbornik funkcionira točno poput prethodnog, ali s jednom malom razlikom. Uvjerite se sami ...

a: nth-last-of-type (1) {obrub: 2px kruta crna; }
Sl. 14 - četvrti-zadnji tip (1)

Primijetite kako se na svakoj razini numeriranje vrsta sidrišta vrši s desna na lijevo, umjesto na normalno lijevo-desno. To je jedina razlika. last-of-type prihvaća brojeve i formule, pa čak i neparne, baš kao i nth-vrste, osim kada se vrši odabir, zadnji tip se tretira kao prvi, drugi zadnji kao drugi, treći zadnji kao treći i tako dalje ...

Time završavamo * selektori tipa. Nadam se da je za vas bila zabavna vožnja, započeli smo s samo tipom, zatim smo prešli na prvi tip, zadnji tip i napravili veliki ulazak u nth-of-type (…) i nth-last- od tipa (..). Ako ste se negdje na sredini izgubili i propali, potičem vas da se poigrate ovom olovkom i ponovno pročitate objašnjenje.

U redu, vrijeme je za skok na sljedeći u ovom manje posjećenom kutku tematskog parka CSS. Druga kategorija pseudo odabirača / klasa u koje ćemo istražiti su * -child klase. Sa jasnim razumijevanjem kako * selektori tipa rade kako prihvaćaju koncept koji stoji iza * -dečevi birači trebali bi vam predstavljati cinch. "Sigurna pobjeda? Što je to? Je li to mjerna jedinica? "Ne, glupane, to znači izuzetno lak zadatak. U svakom slučaju, krenimo s našim prvim selektorom * dijete,: samo dijete.

Dječja pseudo-klasa # 1: samo dijete

Razmislite o sljedećem stilu.

a: samo dijete {
  obrub: 2px kruta crna;
}

To je sada sama definicija razumljivog i razumljivog. Selektor kaže da odabere sve elemente sidra, s obzirom da bi element sidra trebao biti jedino dijete njegovog roditelja, ili, drugim riječima, odaberite sve elemente sidra čiji roditelj ima samo jedno dijete i da je jedno dijete element sidra ,

Slika 15 - a: odabir samo djeteta

Imala sam prijatelja koji mu nikada nije bio miljenik majke, a on je bio jedino dijete. Svejedno, htio sam to uključiti, primjećujući da za razliku od * -of selektora, mi više ne numeriramo tipove, već djecu, počevši od 1 (a ne 0). U usporedbi s samo tipom, element sidrenja u odjeljku 3 nije odabran jer njegov roditelj (ul) ima 3 djece, pa iako je (element sidrenja u razini 3) jedino dijete tipa "a" od roditelj, to nije jedino dijete, postoje i 2 lis.

Dječja pseudo-klasa # 2: prvo dijete

Razmotrite sljedeću deklaraciju stila.

a: prvo dijete {
  obrub: 2px kruta crna;
}

Jednostavno kaže, odaberite sve elemente za sidrenje, ali imajući u vidu jedan uvjet, element sidra trebao bi biti prvo dijete svog roditelja. To je to, nisu potrebna dodatna objašnjenja.

Slika 16 - a: odabir prvog djeteta

Jer ako ste malo zbunjeni zašto nije odabran a u odjeljku 1, to je zato što je prvo dijete u odjeljku 1 (čiji je roditelj tijelo). Glavni, prvo a u odjeljku 1 drugo je dijete i ne može ' Ne prođem filtar za prvo dijete, to je točan razlog zašto loši frajer na kraju nije bio izabran i dobio je veliku jebenu hashtag jebu. Nastavimo na sljedeći

Dječja pseudo-klasa # 3: posljednje dijete

Ovo je dio u kojem bi selektori trebali početi objašnjavati sebe i trebali biste početi razmišljati kako sam glup pokušavajući im to objasniti. Ali moje ime nije mutno i nije me briga što mislite. "Lijepo je tamo dvadeset jednog pilota" da, znam, hvala. Sada pogledajte sljedeću deklaraciju za stil.

a: posljednje dijete {
  obrub: 2px kruta crna;
}

što želite odabrati? "Elementi sidra." A filter koji želite koristiti? zadnje dijete. To jednostavno znači odabir onih elemenata sidra koji su posljednje dijete svog roditelja. Ili drugim riječima odaberite elemente sidra čiji je roditelj napokon zaključio da više nije zabavno i prestao nakon rođenja tog momka. Ispod je kako izgleda stablo: odabiri posljednjeg djeteta.

Slika 16 -: odabir posljednjeg djeteta.

Dječja pseudo-klasa # 4: nth-dijete (broj / an + b / paran / neparan)

Nadam se da ste uspjeli probaviti onaj matematički dodatak koji vam je poslužen prošli put, jer će se to ponoviti samo ovaj put na malo drugačijoj kore.

Sada bih želio da svu svoju pažnju i laserom usmjerite na sljedeći primjer.

a: nth-dijete (1) {granica: 2px kruta crna; }

To je sve isto kao: n-ti tipa, povezao bih se s onim odjeljkom članka ovdje, ali Srednja pravila ne dopuštaju da, ako želite osvježavanje, morat ćete se pomaknuti do tog odjeljka. Ostavljajući Srednja pravila po strani koja bi se u budućnosti mogla promijeniti, ono što se nije promijenilo jest postupak dešifriranja n-tih odabirača.

Baš kao što je slučaj s: nth-of-vrste, u nazivu birača uzmite broj u zagradama i zamijenite "nth" s rednim obrascem tog broja. Stoga je selektor prikazan u primjeru ekvivalentan: prvom djetetu i djeluje potpuno isto; tj. odabire sve elemente sidra, s obzirom da su prvo dijete njihovog roditelja.

To bi trebalo otkriti sličnost dvaju n-ti selektora (n-ti tip i n-dijete), ali mi ćemo ionako ići naprijed i pogledati još jedan primjer.

a: nth-dijete (2n - 1) {obrub: 2px kruta crna; }

Započinjemo postupnim dodavanjem vrijednosti n počevši od 0 u formulu, što nam omogućuje da shvatimo da je gore prikazani selektor u osnovi jednak onima prikazanima u nastavku.

// n = 0 podrazumijeva (2 * 0) - 1 = 0 - 1 = -1
a: nth-dijete (-1) {granica: 2px solid black; } | Nema izbora
// n = 1 podrazumijeva (2 * 1) - 1 = 2 - 1 = 1
a: nth-dijete (1) {granica: 2px kruta crna; }
// n = 2 podrazumijeva (2 * 2) - 1 = 4 - 1 = 3
a: nth-dijete (3) {border: 2px solid black; }
// n = 3 podrazumijeva (2 * 3) - 1 = 6 - 1 = 5
a: nth-dijete (5) {border: 2px solid black; } | Nema daljnjih izbora
...

Kao što jest, ako selektor izbaci brojeve izvan granica (poput -1, 5, 6… u gornjem slučaju) koji se ubacuju u nju, on ih jednostavno ignorira. Slijedi kako izgleda stablo s primijenjenim: nth-dijete (2n-1).

Slika 17 -: n-dijete (2n-1) odabira.

Ljudi u CSS trikovima imaju vrlo informativan članak pod nazivom Korisni: recepti za n-dijete, to biste trebali provjeriti i na testiranje staviti svoje znanje o: nth-dijete-u. Izazivam vas m8.

Pomoću toga preći ćemo na posljednji selektor ovog članka koji je doslovno: nth-last-child. Sranje! zašto je riječ "punting" čak?

Dječja pseudo-klasa # 5: nth-last-dijete (broj / an + b / paran / neparan)

Ovaj selektor djeluje točno poput: nth-dijete, osim što započinje s odabirom elemenata iz suprotnog smjera, baš kao i onaj neugodni srednjoškolski učitelj koji bi postavljao pitanja razredu počevši od mirnih ljudi koji su sjedili na posljednjim klupama. Bože, mrzio sam ga. Ako pogledate dosad nacrtana stabla, djeca su numerirana s lijeva na desno u svakom odjeljku, ali ovaj selektor vidi stablo tako

Sl. 18

Djeca u svakom odjeljku su numerirana desno lijevo. Dakle, ako nastavimo i primijenimo sljedeći stil

a: nth-last-dijete (1) {granica: 2px solid black; }

elementi sidra bit će odabrani kao što je prikazano u nastavku.

Nije jasno, zar ne? Ovaj selektor također vrlo udobno prihvaća formule (oblika an + b), pa su i neparni nizovi, iako su odabiri napravljeni s suprotnog kraja.

OK, ovime se naše zajedničko putovanje završava. Možete platiti svoju kartu putem tvitovanja ovog članka prijateljima programera.

Nadam se da ste uživali čitajući ovo i naučili nešto novo, uključujući i neke sjajne nove engleske riječi.

Ovo je Nash odjava. Vidimo se u sljedećem članku. Slijedite me na Twitteru da biste ostali u kontaktu. Tweetam o stvarima vezanim za dev. Puno.

Tražite više? Redovito objavljujem na svom blogu na nashvail.me. Vidimo se tamo, dobro vam dođe!