
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 class
attribú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 section
használom .section
.
A harmadik út gyakran túlzott, de mégis hasznos, és ez az id
attribú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 const
vá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 div
azonosí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.getElementsByClassName
visszaküldi az összes megfelelő HTML elem gyűjteményét. document.getElementById
csak az első HTML elemet adja vissza, amelyet a megfelelő azonosítóval talál. Ezt ellenőrizheti a getVanillaSelectors
funkció leírásával és a konzol ellenőrzésével.

A dolgok további bonyolítása érdekében, ha a JavaScript querySelectorAll
mó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
class
inká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ő section
gyermek elem . Számos más választókombináció lehetséges.div
user-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 div
osztá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 div
cí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 section
az osztálynévvel rendelkező a item
nem vált pirosra. Ez azért van, mert ez nem div
tag.
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 div
az 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 section
használnia kell .item.section
. A sorrend nem számít, amikor így csinálod, ezért .section.item
mű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 item
az #other
elem ö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 .i
tem elemei t he #ot
ő eleme, de az egyik t he .i
tem elemek bebugyolálva a .wrap
elemenként, hogy az egyik az nem jelent azonnali gyermek.
Ha vizuális képet szeretne kapni, ha mindent összecsuk az #other
elem alatt , akkor ezt látja:

Ez a kettő az elem egyetlen közvetlen gyermeke#other
. Hogy csak a közvetlen gyermek .item
az #other
, érdemes használni #other > .i
tem, ami válassza ki a közvetlen gyermek, b ut nem az undernea th .wrap
per. Remek, mi?
Kvíz 2
- Hogyan választaná ki az összes bekezdéscímkét, amely az
section
elemekhez 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-input
amely 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-dan
ger
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 .item
s hogy gyermekei vagyunk div
s osztály parent-item
segítségével div.parent-item .item
. Hú!
Kiválaszthatja a közvetlen utódokat is. Például az összes div
olyan osztály kiválasztása, amelynek osztálya item
közvetlen leszármazottja div
a következő osztálynak parent-item
: div.parent-item > div.i
tem.
És végül, csak hogy rendetlenség van, akkor lehet sétálni a teljes DOM-fa: div.parent-item .coolest-item .item
. item
osztály, amely gyermekről coolest-item
osztályra, amely gyermek div
osztá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 — trailing
kiválasztva. Másolhatja a se lector into document.q
uerySelector 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!