A 30 CSS választót meg kell jegyezned

Tanuld meg a CSS-t: a teljes útmutató

készítettünk egy teljes útmutatót, amely segít megtanulni a CSS-t, függetlenül attól, hogy csak most kezded el az alapokat, vagy fejlettebb CSS-t szeretnél felfedezni.

CSS szelektorok

tehát megtanultad az alap id, class és descendant szelektorokat—és aztán egy napnak hívtad? Ha igen, akkor óriási rugalmasságot veszít. Tartozol magadnak annyival, hogy ezeket a fejlett CSS és CSS3 választókat a memóriába rendeled.

Alapválasztók

1. *

* { margin: 0; padding: 0;}

üssük ki a nyilvánvalóakat, a kezdők számára, mielőtt áttérnénk a fejlettebb választókra.

a csillag szimbólum az oldal minden egyes elemét megcélozza. Sok fejlesztő ezt a trükköt használja a margins és a paddingnullázására. Bár ez minden bizonnyal rendben van a gyors tesztekhez, azt tanácsolom, hogy soha ne használja ezt a gyártási kódban. Túl nagy súlyt ad a böngészőnek, és felesleges.

a * gyermekválasztókkal is használható.

#container * { border: 1px solid black;}

ez minden egyes elemet megcéloz, amely a #containerdiv gyermeke. Ismét próbáld meg nem használni ezt a technikát, ha valaha is.

2. #X

#container { width: 960px; margin: auto;}

a hash szimbólum előtagja egy választóhoz lehetővé teszi számunkra, hogy id – vel célozzuk meg. Ez könnyen a leggyakoribb használat; azonban legyen óvatos a id szelektorok használatakor.

kérdezd meg magadtól: feltétlenül alkalmaznom kell egy id elemet erre az elemre, hogy megcélozzam?

id a szelektorok merevek és nem teszik lehetővé az újrafelhasználást. Ha lehetséges, először próbáljon meg egy címkenevet, az egyik új HTML5 elemet vagy akár egy álosztályt használni.

3. .X

.error { color: red;}

ez egy class választó. A ids és a classes közötti különbség az, hogy az utóbbival több elemet is megcélozhatunk. Használja a classes értéket, ha azt szeretné, hogy a stílus egy elemcsoportra vonatkozzon. Alternatív megoldásként használja a id s – t, hogy megtalálja a tűt a szénakazalban, és csak az adott elemet stílusosítsa.

4. X

a { color: red; }ul { margin-left: 0; }

mi van, ha egy oldal összes elemét a type szerint szeretné megcélozni, nem pedig id vagy classnév szerint? Legyen egyszerű, és használjon típusválasztót. Ha az összes rendezetlen listát meg kell céloznia, használja a ul {}értéket.

élő Demo alapvető szelektorok

Kombinátor szelektorok

5. X Y

li a { text-decoration: none;}

a következő leggyakoribb választó a descendant választó. Ha konkrétabbnak kell lennie a választókkal, ezeket használja. Például mi van, ha az összes horgonycímke megcélzása helyett csak azokat a horgonyokat kell megcéloznia, amelyek rendezetlen listán vannak? Ez kifejezetten, ha azt használja a leszármazott választó.

Pro-tipp: Ha a választó úgy néz ki, mint X Y Z A B.error, rosszul csinálod. Mindig kérdezd meg magadtól, hogy feltétlenül szükséges-e ezt a súlyt alkalmazni.

6. X + Y

ul + p { color: red;}

ezt szomszédos választónak nevezzük. Csak azt az elemet választja ki, amelyet közvetlenül az előző elem előz meg. Ebben az esetben minden ul után csak az első bekezdés lesz piros szöveg.

7. X > Y

div#container > ul { border: 1px solid black;}

a különbség a standard X Y és X > Y között az, hogy az utóbbi csak a közvetlen gyermekeket választja ki. Vegyük például a következő jelölést.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

a #container > ulválasztó csak azokat a ul – eket célozza meg, amelyek a div közvetlen gyermekei, idcontainer – vel. Nem fogja megcélozni például az ul – et, amely az első li gyermeke.

emiatt a gyermekkombinátor használatának előnyei vannak. Valójában különösen akkor ajánlott, ha JavaScript-alapú CSS-választó motorokkal dolgozik.

8. X ~ Y

ul ~ p { color: red;}

ez a testvérkombinátor hasonló a X + Y – hez, de kevésbé szigorú. Míg egy szomszédos választó (ul + p) csak az első elemet választja ki, amelyet közvetlenül az előbbi választó előz meg, ez általánosabb. A fenti példánkra hivatkozva kiválaszt minden pelemet, amennyiben azok ul – et követnek.

élő Demo Kombinátor szelektorok

attribútum szelektorok

9. X

a { color: green;}

attribútumválasztónak nevezzük, a fenti példában ez csak azokat a horgonycímkéket választja ki, amelyek title attribútummal rendelkeznek. Azok a horgonycímkék, amelyek nem, nem kapják meg ezt a stílust. De mi van, ha konkrétabbnak kell lennie? Nézze meg a következő példát!

10. X

a { color: #83b348; /* Envato green */}

a fenti részlet az összes horgonycímkét stílusosítja, amelyek a https://code.tutsplus.com – re hivatkoznak; megkapják a márkás zöld színünket. Az összes többi horgonycímke változatlan marad.

vegye figyelembe, hogy az értéket idézőjelekbe csomagoljuk. Ne felejtse el ezt megtenni, ha JavaScript CSS választó motort használ. Ha lehetséges, mindig használjon CSS3 választókat a nem hivatalos módszerek helyett.

ez jól működik, bár kissé merev. Mi van, ha a link valóban az Envato Tuts+ – ra irányul, de talán az út code.tutsplus.com a teljes URL helyett? Ezekben az esetekben használhatunk egy kicsit a reguláris kifejezések szintaxisát.

11. X

a { color: #83b348; /* Envato green */}

ott megyünk; ez az, amire szükségünk van. A csillag azt jelzi, hogy a folyamatértéknek valahol meg kell jelennie az attribútum értékében. Úgy, ez kiterjed tutsplus.com, code.tutsplus.com, sőt webdesign.tutsplus.com.

ne feledje, hogy ez egy tág állítás. Mi van, ha a horgonycímke valamilyen nem Envato webhelyhez kapcsolódik, a tutsplus karakterlánccal az URL-ben? Ha konkrétabbnak kell lennie, használja a ^ és a $ parancsot, hogy hivatkozzon egy karakterlánc elejére és végére.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

Elgondolkozott már azon, hogy egyes webhelyek képesek-e egy kis ikont megjeleníteni a külső linkek mellett? Biztos vagyok benne, hogy ezeket már látta; szép emlékeztetők arra, hogy a link egy teljesen más webhelyre irányítja Önt.

ez egy karátos szimbólum. Leggyakrabban a reguláris kifejezésekben használják a karakterlánc kezdetének kijelölésére. Ha minden olyan horgonycímkét meg akarunk célozni ,amelynek href értéke http – vel kezdődik, használhatunk egy választót, amely hasonló a fent bemutatott kódrészlethez.

figyeljük meg, hogy nem keresünk https:// – et; ez szükségtelen, és nem veszi figyelembe a https:// – vel kezdődő URL-eket.

mi lenne, ha inkább az összes horgonyt stílusoznánk, amelyek mondjuk egy fotóra hivatkoznak? Ezekben az esetekben keressük meg a karakterlánc végét.

13. X

a { color: red;}

ismét egy reguláris kifejezés szimbólumot használunk, $, hogy egy karakterlánc végére utaljunk. Ebben az esetben minden olyan horgonyt keresünk, amely egy képre hivatkozik—vagy legalább egy .jpg – vel végződő URL-t. Ne feledje, hogy ez nem fogja rögzíteni a GIF és a PNG képeket.

14. X

a { color: red;}

hogyan kompenzáljuk a különböző képtípusokat? Nos, több szelektort is létrehozhatunk, például:

a,a,a,a { color: red;}

de ez fájdalom, és nem hatékony. Egy másik lehetséges megoldás az egyéni attribútumok használata. Mi lenne, ha hozzáadnánk a saját data-filetype attribútumunkat minden olyan horgonyhoz, amely egy képre hivatkozik?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

ezután a horoggal a helyén használhatunk egy szabványos attribútumválasztót, hogy csak azokat a horgonyokat célozzuk meg.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

itt van egy különleges, amely lenyűgözi barátait. Nem túl sokan tudnak erről a trükkről. A tilde (~) szimbólum lehetővé teszi egy olyan attribútum megcélzását, amelynek szóközzel elválasztott értéklistája van.

a fenti 15-ös számú egyéni attribútummal együtt létrehozhatunk egy data-info attribútumot, amely szóközzel elválasztott listát kaphat mindenről, amit meg kell jegyeznünk. Ebben az esetben feljegyezzük a külső linkeket és a képekre mutató linkeket—csak a példa kedvéért.

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

ezzel a jelöléssel a ~ attribútumválasztó trükk segítségével minden olyan címkét megcélozhatunk, amely rendelkezik ezen értékek bármelyikével.

/* Target data-info attr that contains the value "external" */a { color: red;}/* And which contain the value "image" */a { border: 1px solid black;}

elég remek, mi?

az Attribútumválasztók élő bemutatója

Álválasztók

16. X: meglátogatott és X:link

a:link { color: red; }a:visited { color: purple; }

a :link pszeudo-osztályt használjuk az összes horgonycímke megcélzására, amelyekre még nem kell kattintani.

Alternatív megoldásként létezik a :visited pszeudo osztály is, amely, ahogy az várható volt, lehetővé teszi számunkra, hogy speciális stílusokat alkalmazzunk csak az oldalon lévő horgonycímkékre, amelyekre rákattintottak, vagy “meglátogatták”.

17. X: checked

input:checked { border: 1px solid black;}

ez a pszeudo osztály csak egy bejelölt felhasználói felület elemet céloz meg—például egy választógombot vagy jelölőnégyzetet. Ilyen egyszerű.

18. X:

után a before és after pszeudo osztályok nagyszerűek. Úgy tűnik, az emberek minden nap új és kreatív módszereket találnak arra, hogy hatékonyan használják őket. Egyszerűen tartalmat generálnak a kiválasztott elem körül.

sokan először vezették be ezeket az osztályokat, amikor találkoztak a clear-fix hack.

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }.clearfix { *display: inline-block; _height: 1%;}

ez a hack a :after pszeudo osztályt használja az elem utáni szóköz hozzáadásához, majd törléséhez. Kiváló trükk a szerszámtáskában, különösen azokban az esetekben, amikor a overflow: hidden; módszer nem lehetséges.

ennek további kreatív felhasználásához olvassa el az árnyékok létrehozására vonatkozó gyors tippemet.

a CSS3 szelektorok specifikációja szerint technikailag két :: kettőspont pszeudo elem szintaxisát kell használni. Ahhoz azonban, hogy továbbra is kompatibilis, a user-agent elfogadja egy kettőspont használatát is.

19. X: hover

div:hover { background: #e3e3e3;}

Ó, Gyerünk. Ezt ismered. Ennek hivatalos kifejezése a “felhasználói akció pszeudo osztály”. Zavarónak hangzik, de valójában nem az. szeretne speciális stílust alkalmazni, amikor a felhasználó lebeg egy elem felett? Ez elvégzi a munkát!

ne feledje, hogy az Internet Explorer régebbi verziói nem válaszolnak, ha a :hover pszeudo osztályt nem horgonycímkére alkalmazzák.

leggyakrabban akkor használja ezt a választót, amikor például egy border-bottom – et alkalmaz a horgonycímkékre, amikor fölé viszi az egérmutatót.

a:hover { border-bottom: 1px solid black;}

Pro-tip: border-bottom: 1px solid black; jobban néz ki, mint text-decoration: underline;.

20. X: nem (választó)

div:not(#container) { color: blue;}

a negation pseudo osztály különösen hasznos. Tegyük fel, hogy az összes divs-t ki akarom választani, kivéve azt, amelynek azonosítója container. A fenti részlet tökéletesen kezeli ezt a feladatot.

vagy ha minden egyes elemet ki akartam választani (nem ajánlott), kivéve a bekezdéscímkéket, megtehetnénk:

*:not(p) { color: green;}

21. X:: pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

használhatunk pszeudo elemeket (amelyeket :: jelöl) egy elem töredékeinek stílusához, például az első sorhoz vagy az első betűhöz. Ne feledje, hogy ezeket a blokkszintű elemekre kell alkalmazni a hatálybalépés érdekében.

egy álelem két kettőspontból áll: ::

célozza meg a bekezdés első betűjét

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

ez a részlet egy absztrakció, amely megtalálja az oldal összes bekezdését,majd csak az elem első betűjét célozza meg.

ezt leggyakrabban újságszerű stílus létrehozására használják egy cikk első betűjéhez.

cél a bekezdés első sora

p::first-line { font-weight: bold; font-size: 1.2em;}

Hasonlóképpen, a ::first-line pszeudo elem a várakozásoknak megfelelően csak az elem első sorát formázza.

“a meglévő stíluslapokkal való kompatibilitás érdekében a felhasználói programoknak el kell fogadniuk a CSS 1. és 2. szintjén bevezetett álelemek előző kettőspont-jelölését is (nevezetesen, :first-line, :first-letter, :before és :after). Ez a kompatibilitás nem megengedett Az ebben a specifikációban bevezetett új pszeudo-elemek esetében.”- W3C szelektorok specifikáció

pszeudo szelektorok élő bemutatója

n-edik gyermek és Típusválasztók

22. X: n-edik gyermek (n)

li:nth-child(3) { color: red;}

emlékszel azokra a napokra, amikor nem volt módunk konkrét elemeket megcélozni egy veremben? A nth-child pszeudo osztály megoldja ezt!

kérjük, vegye figyelembe, hogy a nth-child egész számot fogad el paraméterként, de ez nem nulla alapú. Ha a második listaelemet szeretné megcélozni, használja a li:nth-child(2)parancsot.

ezt akár a gyermekek változó készletének kiválasztására is használhatjuk. Például megtehetjük li:nth-child(4n) minden negyedik listaelem kiválasztásához.

23. X: n-edik-utolsó-gyermek (n)

li:nth-last-child(2) { color: red;}

mi lenne, ha lenne egy hatalmas listája a ul – ben, és csak a harmadik utolsó elemhez kell hozzáférnie? A li:nth-child(397) helyett a nth-last-child pszeudo osztályt használhatja.

ez a technika szinte azonos módon működik a fenti 16. számmal. A különbség az, hogy a gyűjtemény végén kezdődik, és visszafelé működik.

24. X: n-edik típusú (n)

ul:nth-of-type(3) { border: 1px solid black;}

lesz idő, amikor a child kiválasztása helyett inkább a type elem szerint kell kiválasztania.

képzelje el a jelölést, amely öt rendezetlen listát tartalmaz. Ha csak a harmadik ul – et akartad stílusossá tenni, és nem rendelkeztél egy egyedi id – vel, akkor használhatod a nth-of-type(n) pszeudo osztályt. A fenti részletben csak a harmadik ullesz határ körül.

25. X: n-edik típus utolsó (n)

ul:nth-last-of-type(3) { border: 1px solid black;}

és igen, hogy következetesek maradjunk, használhatjuk a nth-last-of-type – et is, hogy a kiválasztók listájának végén kezdjük, és visszafelé haladjunk a kívánt elem megcélzásához.

26. X: első gyermek

ul li:first-child { border-top: none;}

ez a strukturális pszeudo osztály lehetővé teszi számunkra, hogy csak az elem szülőjének első gyermekét célozzuk meg. Ezzel gyakran eltávolítja a szegélyeket az első és az utolsó listaelemekről.

tegyük fel például, hogy van egy sorlistája, és mindegyikhez tartozik egy border-topés egy border-bottom. Nos, ezzel az elrendezéssel a készlet első és utolsó eleme kissé furcsának tűnik.

sok tervező a first és last osztályokat alkalmazza ennek kompenzálására. Ehelyett használhatja ezeket a pszeudo osztályokat.

27. X: utolsó gyermek

ul > li:last-child { color: green;}

a first-child ellentéte, last-child az elem szülőjének utolsó elemét célozza meg.

last-child Választópélda

építsünk egy egyszerű példát ezen osztályok egyik lehetséges használatának bemutatására. Létrehozunk egy stílusú listaelemet.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

a jelöléshez nincs semmi különös: csak egy egyszerű lista.

itt van a CSS:

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

ez a stílus beállítja a hátteret, eltávolítja a böngésző alapértelmezett kitöltését a ul – en, és minden li – re szegélyt alkalmaz, hogy egy kis mélységet biztosítson.

ha mélységet szeretne hozzáadni a listákhoz, alkalmazzon border-bottom értéket minden li – re, amely egy vagy két árnyalattal sötétebb, mint a liháttérszíne. Ezután alkalmazzon egy border-top – et, amely néhány árnyalattal világosabb.

az egyetlen probléma, amint az a fenti képen látható, az, hogy a rendezetlen lista legtetejére és aljára szegélyt alkalmaznak—ami furcsának tűnik. Használjuk a :first-child és :last-child pszeudo osztályokat a javításhoz.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

ott megyünk; ez javítja!

28. X: only-child

div p:only-child { color: red;}

őszintén szólva, valószínűleg nem fogja túl gyakran használni a only-child pszeudo osztályt. Ennek ellenére elérhető, ha szüksége van rá.

lehetővé teszi olyan elemek megcélzását, amelyek a szülő egyetlen gyermeke. Például a fenti részletre hivatkozva csak az a bekezdés lesz piros színű, amely a div egyetlen gyermeke.

tegyük fel a következő jelölést.

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

ebben az esetben a második divbekezdés nem lesz célzott; csak az első div. Amint egynél több gyermeket alkalmaz egy elemre,a only-child pszeudo osztály megszűnik.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

ez a szerkezeti pszeudo osztály használható néhány okos módon. Olyan elemeket fog megcélozni, amelyeknek nincsenek testvérei a szülő konténerében. Például célozzuk meg az összes ul s-t, amelyeknek csak egyetlen listaeleme van.

először kérdezd meg magadtól, hogyan végeznéd el ezt a feladatot. Megteheted ul li, de ez az összes listaelemet megcélozná. Az egyetlen megoldás a only-of-type használata.

ul > li:only-of-type { font-weight: bold;}

30. X: első típusú

a first-of-type pszeudo osztály lehetővé teszi a típus első testvéreinek kiválasztását.

teszt

hogy jobban megértsük ezt, tegyünk egy tesztet. Másolja a következő jelölést a kódszerkesztőbe:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

most, anélkül, hogy tovább olvasná, próbálja meg kitalálni, hogyan kell csak a “2.lista elemet”megcélozni. Amikor kitalálta (vagy Feladta), olvassa tovább.

1.megoldás

a teszt megoldásának számos módja van. Egy maroknyiat fogunk átnézni. Kezdjük a first-of-type használatával.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

ez a részlet lényegében azt mondja, hogy megtalálja az első rendezetlen listát az oldalon, akkor csak a közvetlen gyermekeket találja meg, amelyek listaelemek. Ezután szűrjük le, hogy csak a második lista elem, hogy a készlet.

2.megoldás

egy másik lehetőség a szomszédos választó használata.

p + ul li:last-child { font-weight: bold;}

ebben a forgatókönyvben megtaláljuk a ul amely azonnal folytatja a p címkét, majd megtaláljuk az elem utolsó gyermekét.

3.megoldás

ezekkel a választókkal olyan ellenszenvesek vagy játékosak lehetünk, amennyit csak akarunk.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

ezúttal megragadjuk az első ul oldalt, majd megtaláljuk a legelső listaelemet, de alulról kezdve!

az n-edik gyermek-és Típusválasztók élő bemutatója

következtetés

ha kompenzálja a régebbi böngészőket, mint például az Internet Explorer 6, akkor is óvatosnak kell lennie az újabb kiválasztók használatakor. De kérlek, ne hagyd, hogy ez visszatartson attól, hogy megtanuld ezeket. Nagy kárt okoznál magadnak. Feltétlenül olvassa el itt a böngésző-kompatibilitási listát. Alternatív megoldásként használhatja Dean Edward kiváló IE9-jét.js script, hogy támogassa ezeket a választókat a régebbi böngészők számára.

másodszor, amikor a JavaScript könyvtárakkal dolgozik, mint például a népszerű jQuery, mindig próbálja meg használni ezeket a natív CSS3 választókat a könyvtár egyéni metódusai/szelektorai felett, ha lehetséges. Ez gyorsabbá teszi a kódot, mivel a választómotor a böngésző natív elemzését használhatja, nem pedig a sajátját.

nagyszerű, hogy időt töltesz a webdesign alapjainak megtanulásával, de ha gyors megoldásra van szükséged, az egyik használatra kész CSS-sablonunk jó választás lehet. Van néhány prémium CSS elem is, amelyet figyelembe kell vennie.

• 
  CSS3
  15 elegáns CSS árazási táblázatok a legújabb webes projekthez
  Monty Shokeen
• 
  Bootstrap 4
  18 legjobb Bootstrap 4 Plugin
  Monty Shokeen

Ingyenes hozzáférés az Envato Elements-hez 1 hónapig

Végül itt van egy nagyon különleges ajánlat, amely segít professzionális megjelenésű webhelyek és alkalmazások létrehozásában. A CSS-szelektorok használata mellett miért nem használja ki a kiváló minőségű stock fotók, videofelvételek, prémium betűtípusok, grafikák, illusztrációk stb. előnyeit?

normális esetben fizetnie kell az ilyen erőforrásokért. De most, akkor hozzáférhet millió kreatív eszközök a kódolási projektek egy egész hónapig, teljesen ingyenes. És mi több, kapsz korlátlan letöltések, így megragad, amennyit csak akar ebben a hónapban, és csak akkor fizet, ha úgy dönt, hogy továbbra is!

hogy kihasználják ezt az ajánlatot, kattintson erre a speciális regisztrációs linkre, vagy írja be az alábbi kódot a regisztrációs oldalon:

elements_cont_tuts-freemonth1-4bwkbp

ne várjon túl sokáig—az ajánlat csak korlátozott ideig érvényes!