A minap interjút készítettem valakivel, aki befejezte a freeCodeCamp front-end tanúsítását. Végzett egy meglehetősen rangos bootcamp-on is, ahol a résztvevők hat hétig 8 és 20 óra között kódoltak. Yikes!
Nagyszerű programozási képessége volt, de meglepődve tapasztaltam, hogy a CSS-ben való ismerete hiányzik. Hiánya alatt azt értem, hogy nem tudta, hogyan válasszon ki egy osztályt a stílus alkalmazásához. Ez nem feltétlenül tükrözi negatívan őt. Ha valami, akkor rávilágít arra, hogy sok programozó hogyan látja a CSS-t.
Sokan azt gondolják, hogy a CSS elsajátítása nem fontos, mivel a tervezők általában képesek lesznek Önnek megvalósítani a CSS-t. Bár ez igaz, sokszor Önnek (mint programozónak) ismernie kell néhány alapvető CSS-t ahhoz, hogy kiválasszon egy elemet, és felszólítsa, hogy tegyen valamit, ha valami más történik.
Például a Green Sock Animation Platform (GSAP) valószínűleg túl program-ahhoz, hogy tervezőközpontú legyen. Ehhez fejlesztőre van szükség, aki ismeri a CSS-t és a programozást is.
Nem azt mondom, hogy minden fejlesztőnek CSS-mesternek kell lennie. De azt hiszem, ha full-stack fejlesztőként fogod magad nevezni, akkor ismerned kell a CSS alapjait. Az alapok pedig a választóval kezdődnek .
Jogi nyilatkozat: A jQuery szelektorok valójában nem csak a jQuery számára jellemzőek - valójában CSS szelektorok. Ha azonban hasonló vagy hozzám, akkor megtanultad a jQuery-t, mielőtt megfelelően megtanultad volna a CSS-t, és ezért automatikusan társítottad a szelektorokat a jQuery-hez. Bár ez a cikk a CSS szelektorokról szól, segít Önnek, ha néhány pontosításra van szüksége a jQuery szelektorokkal kapcsolatban is.
A CSS Selector
Mindig hasznosnak találom a kóddal való játékot, ezért íme egy egyszerű CodePen az alapvető választókkal való játékhoz.
A HTML-ben háromféleképpen lehet címkézni vagy kategorizálni az elemeket. Az első út a legszélesebb: címke név szerint. Például kiválaszthatja az oldal összesdiv s-ját az egyszerű választóval div. Hé, ez könnyű volt!
A második módszer valószínűleg a leginkább használt: az classattribútum. Osztályonként választhat egy pont ( .) használatával, így a fenti példában válassza ki az összesetosztályú elemeket választóként sectionhasználom .section.
A harmadik út gyakran túlzott, de mégis hasznos, és ez az idattribútum. Az azonosítóknak azonosítaniuk kell az elemeket, ahogyan az SSN (az Egyesült Államokban) személyként is azonosíthatja. Ez azt jelenti, hogy az azonosítóknak egyedinek kell lenniük az egész oldalon. Egy adott azonosítóval rendelkező elem kiválasztásához használja a hashtag ( #) vagy az octothorpe szót, ahogy én szeretem hívni. Az otheráltalam használt azonosítóval rendelkező elem kiválasztása #other.
Ezek a legalapvetőbb választók. Összefoglalva:
- válasszon címke neve alapján (nincs előtag)
- válasszon osztály neve szerint (előtag
.) - kiválasztás azonosító szerint (előtag
#)
Ez a három választó önmagában lehetővé teszi, hogy szinte bármit kiválasszon a weboldaláról.
Kvíz 1
- Hogyan választaná ki az összes bekezdéscímkét az oldalon? (tipp: bekezdéscímkék vannak
p) - Hogyan választaná ki az összes osztályt
button-text? - Hogyan válasszuk ki a elemet azonosítója
form-userinput?
Nyugodtan ossza meg válaszait a megjegyzésekben!
Minden azonosítónak egyedinek kell lennie?
Ez egy kis kitérés, amelyet nagyon fontosnak érzek. De ha csak azért van itt, hogy megtanulja a választók használatát, nyugodtan ugorjon a következő szakaszra
Azonos névvel feltételezheti, hogy minden HTML-azonosítónak egyedinek kell lennie, különben a HTML-dokumentuma nem fog működni. Végül is, ha megpróbál két constváltozót használni, akkor sok szerkesztő kiabálni fogja magát, tehát a HTML sem kiabálna?
A probléma az, hogy a HTML nem fog rád kiabálni. Valójában senki nem is mondja el, hogy valami baj van. Találhat egy hibát, amely nem egyedi azonosítóból származik. De megőrjíti magát, és megpróbálja kideríteni a hiba kiváltó okát, mert ez nagyon finom kudarc.
A fenti példa bemutatja, hogy miért okozhat ismétlődő azonosítókat az Ön weboldalán. Először is, valójában két divazonosítóval rendelkezik other. Ha megjegyzést fűz a stílusokhoz #other, akkor látni fogja, hogy mindkét elem valóban stílusos lesz. Ez elgondolkodtathatja Önt: "Nos, hé, felcserélhetem az azonosítókat és osztályneveket!"
Nem olyan gyorsan. Ha megnézi a JavaScript panelt, látni fogja, hogy bizonyos elemeket választottam ki az elemek címkéi alapján: címke neve, osztály neve vagy azonosítója. Ezt észreveszi, document.getElementsByTagNameés document.getElementsByClassNamevisszaküldi az összes megfelelő HTML elem gyűjteményét. document.getElementByIdcsak az első HTML elemet adja vissza, amelyet a megfelelő azonosítóval talál. Ezt ellenőrizheti a getVanillaSelectorsfunkció leírásával és a konzol ellenőrzésével.
A dolgok további bonyolítása érdekében, ha a JavaScript querySelectorAllmódszerét használja (amely egy CSS választót vesz be bemenetként), akkor teljesen más eredményt kap.
A jQuery csak azért, hogy veled kavarjon, mást csinál, annak ellenére, hogy hasonló szintaxisa van querySelectorAll.
Nincs magyarázatom a különböző viselkedésre. Azt azonban elmondhatom, hogyan lehet elkerülni. Itt vannak a szabályaim:
- Soha ne használjon azonosítókat. Használjon
classinkább attribútumokat. - Ha ID-t kell használnom, nevezze el úgy, hogy az akkor is egyedi legyen, ha hasonló elem létezik az oldalon; például
menu-item-01
Előfordulhat, hogy az űrlapoknak és azok beviteli mezőinek azonosítóval kell rendelkezniük. Ebben az esetben követheti a 2. számú szabályt. Így alakítanám ki a névteret a felhasználói regisztrációhoz szükséges űrlapon:
Így ha két űrlapom van ugyanazon az oldalon (mondjuk user-signupés user-signin), akkor garantáltan egyedi azonosítókkal rendelkezik. Még akkor is, ha a userID mezők hasonlóak az űrlapok között.
Válogatók kombinálása
Néha egyetlen választó egyszerűen nem vágja le. Néha meg kell szereznie mindazt div, amelynek osztályneve van section. Máskor szükség van minden elemre, amelynek osztályneve az azonosítóval rendelkező sectiongyermek elem . Számos más választókombináció lehetséges.divuser-signup
Ebben a részben megismerheti a választók kombinálásának három módját , és bízom benne, hogy ezek megfelelnek az Ön igényeinek 90% -ának. Ha úgy találja, hogy szükségleteinek több mint 11% -a nem teljesül, gyere panaszkodjon nekem, és ezt szerkesztem úgy, hogy az igényeinek 89% -a :)
Kezdjük a korábbiakhoz hasonlóan egy CodePen-tel:
A választók egyesítése egyetlen elemhez
OK, először térjünk ki a választók egyesítésére egyetlen elemnél. Ez azt az elemet választja, amelynek tag neve x, ÉS osztály neve y, ÉS azonosítója van z. Természetesen nincs szükség mindháromra, de mindhárom kombinálható.
Tegyük fel, hogy az összes divosztályt ki akarjuk jelölni item. Ahhoz, hogy ezt megtegyük, egyesíti a két: div.item. A legáltalánosabbról a legkonkrétabbra balról jobbra halad. Ez kiválasztja az összes divcímkét, amelyeknek IS van osztályneve item. Fontos megjegyezni, hogy és között nincs hely . Szóköz hozzáadása teljesen megváltoztatja a választót , ahogy a következő részben áttekintem.div.item
Ha visszavonja a megfelelő CSS-t, látni fogja, hogy sectionaz osztálynévvel rendelkező a itemnem vált pirosra. Ez azért van, mert ez nem divtag.
Ugyanezt a mintát megteheti osztálynevekkel és azonosítókkal is. De ha van egy elem azonosítója, akkor az azonosítót is használhatja. Nincs ok egy adott osztálynévvel rendelkező azonosító kiválasztására, mert ha betartotta a fenti azonosító szabályokat, akkor amúgy is csak egy elem van ezzel az azonosítóval.
De csak paritás, itt egy példa, hogy kiválasszuk a divaz osztály itemés azonosítója other: div.item#other. Ismét balról jobbra haladva a legáltalánosabban a konkrétabbra megy.
Valószínűleg ezt a szintaxist használja egy olyan elem kiválasztására, amelynek több osztálya van. Ehhez csak szét kell választani az összes osztályt pontokkal. Az összes elem kiválasztásához, amely MINDKET osztályt tartalmaz, itemés sectionhasználnia kell .item.section. A sorrend nem számít, amikor így csinálod, ezért .section.itemműködni is fog.
Ez az egy trükk lehetővé teszi, hogy konkrétabb legyen a választókban.
A „gyermek” választó
A szelektorok kombinálásának második módja a „gyermek” választó használata, ahogy én szeretem hívni. Ennek kétféle módja van, ezért kezdem a legáltalánosabbal.
Először szóköz hozzáadásával kiválaszthatja egy adott elem bármelyik gyermekét. Például itemaz #otherelem összes gyermekének kiválasztásához az lenne #other .item. Figyelje meg a választók közötti helyet.
Másodszor, a gt; használatával kiválaszthat egy adott elem közvetlen gyermekeit &. Egy elem „közvetlen gyermeke” az, amely csak egy szint mély. A Például vannak t wo .item elemei t he #otő eleme, de az egyik t he .item elemek bebugyolálva a .wrapelemenként, hogy az egyik az nem jelent azonnali gyermek.
Ha vizuális képet szeretne kapni, ha mindent összecsuk az #otherelem alatt , akkor ezt látja:
Ez a kettő az elem egyetlen közvetlen gyermeke#other . Hogy csak a közvetlen gyermek .itemaz #other, érdemes használni #other > .item, ami válassza ki a közvetlen gyermek, b ut nem az undernea th .wrapper. Remek, mi?
Kvíz 2
- Hogyan választaná ki az összes bekezdéscímkét, amely az
sectionelemekhez tartozik ? (tipp: bekezdéscímkék vannakp) - Hogyan választaná ki az összes olyan osztályt, amelynek osztálya a következő
button-text, amely az osztályba tartozó tételek leszármazottjabutton? - Hogyan választaná ki azt az osztályt tartalmazó elemet,
form-inputamely az elemek közvetlen gyermekeform? - Bónuszkérdés : magyarázza el, mit választ ez a választó:
header.title > form.user-signup button.button-danger
Mint korábban, bátran ossza meg válaszait kommentekben!
Az egészet összerakva - szó szerint
Kombinálhatja a kombinált választókat. Igazán. A fenti bónuszkérdés mutat rá példát, de a kódtoll példájának végére felvettem néhány kombinációt.
Például megadhatja az összes .items hogy gyermekei vagyunk divs osztály parent-itemsegítségével div.parent-item .item. Hú!
Kiválaszthatja a közvetlen utódokat is. Például az összes divolyan osztály kiválasztása, amelynek osztálya itemközvetlen leszármazottja diva következő osztálynak parent-item: div.parent-item > div.item.
És végül, csak hogy rendetlenség van, akkor lehet sétálni a teljes DOM-fa: div.parent-item .coolest-item .item. itemosztály, amely gyermekről coolest-itemosztályra, amely gyermek divosztályról parent-item.
Ne feledje, hogy általában nem jó ötlet meghaladni a mélység két vagy három szintjét, amikor a szelektorokat fészkeli. Ezután furcsa sajátosságokba kerül, amelyeket hatékonyabban megoldhat, ha jobban megnevezi CSS osztályait. De ez nem tartozik e cikk hatálya alá. Ha többet szeretnél tudni, tudasd velem, és írok róla.
Bónusz: A Chrome DevTools használata választó megszerzéséhez
A Chrome DevTools segítségével megkaphatja a DOM-on kiválasztható elemek kiválasztóját. Itt van, hogyan:
- Nyissa meg a Chrome DevTools alkalmazást. Mivel elemet választ, folytassa a jobb egérgombbal a kijelölni kívánt elemen, majd kattintson az „Ellenőrzés” gombra:
2. Kattintson a jobb gombbal a kiválasztani kívánt DOM elemre, és vigye az egérmutatót a „Másolás” fölé, majd kattintson a „Másolás választó” elemre.
3. Ennyi! Az általam másolt választó egyébként. Van #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailingkiválasztva. Másolhatja a se lector into document.querySelector vagy a jQuery elemeket, és megszerezheti az elemet.
Remélhetőleg ez az írás hasznos volt! Ha tetszett, kérlek, adj nekem néhány tapsot, hogy többen lássák. Köszönöm!