Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)
Szóval más ismered az id
, class
és descendant
szelektorok alapjait – és kész is? Ha igen, akkor hatalmas szintű rugalmasságot hagysz ki. Bár a legtöbb szelektor, amit ebben a cikkben említeni fogunk, része a CSS3 specifikációnak, vannak olyanok, melyek csak a modern böngészőkben elérhetőek, és tartozol annyival magadnak, hogy ezeket is megismered.
1. *
* { margin: 0; padding: 0; }
Kezdjük a legnyilvánvalóbbal, a kezdők kedvéért, még mielőtt továbblépnénk a jóval bonyolultabb szelektorokhoz.
A csillag szimbólum minden egyes elemet jelöl az oldalon. Sok fejlesztő használja ezt a trükköt, hogy kinullázza a margin
t és a padding
ot. Bár ez biztosan jó egy gyors tesztelésre, azt javaslom, hogy soha ne használd termékkódban. Túl sok terhet tesz a böngészőre, és az felesleges.
A *
használható még gyermek szelektorokkal együtt is.
#container * { border: 1px solid black; }
Ez minden egyes elemre vonatkozik, ami a #container
div
gyermeke. Megismétlem, ha lehetséges, próbáld meg nem túl gyakran alkalmazni ezt a technikát.
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
2. #X
#container { width: 960px; margin: auto; }
A hash szimbólum használata egy szelektornál id
-t céloz meg. Ez a legnépszerűbb használata, de legyünk óvatosak az id
szelektorok használatával.
Kérdezd meg magadtól: mindenképp szükséges egy
id
-t hozzáfűzni ehhez az elemhez ahhoz, hogy hivatkozni tudjak rá?
Az id
szelektorok merevek és nem újrahasznosíthatóak. Ha lehetséges, először próbálj meg egy tag nevet használni, az új HTML5 elemek valamelyikét, vagy akár egy pszeudo-osztályt.
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
3. .X
.error { color: red; }
Ez egy class
(osztály) szelektor. A különbség az id
-k és a classok
között az, hogy az utóbbi több elemre is vonatkozhat. A class
okat akkor használd, ha egy csoport elemet szeretnél stilizálni. Az id
-t inkább csak arra használd, hogy megtalálj egy tűt a szénakazalban, és csak azt az egy adott elemet stilizáld.
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
4. X Y
li a { text-decoration: none; }
A másik leggyakoribb szelektor a descendant
(leszármazott) szelektor. Amikor sokkal pontosabbnak kell lenned a szelektoraiddal, használd ezeket. Például mi van akkor, ha minden anchor (horgony) tag helyett csak azokat szeretnéd megcélozni, amik egy felsoroláson belül vannak? Ez egy olyan eset, amikor érdemes a leszármazott szelektort használni.
Pro-tipp – Ha a szelektorod így néz ki:
X Y Z A B.error
, akkor rosszul csinálod. Mindig kérdezd meg magadtól, hogy tényleg szükséges-e hozzáadni minden szintet.
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
5. X
a { color: red; } ul { margin-left: 0; }
Mi van akkor, ha minden elemet szeretnél becélozni egy oldalon a type
(típus) szerint, az id
vagy a class
név használata helyett? Csináld minél egyszerűbben, és használj type szelektort. Ha minden felsorolást szeretnél megcélozni, használd az ul {}
-t.
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
6. X:visited és X:link
a:link { color: red; } a:visted { color: purple; }
A :link
pszeudo-osztályt arra használjuk, hogy minden olyan anchor taget megcélozzunk, amire még nem kattintottak.
Alternatívaként használjuk a :visited
pszeudo-osztályt, ami, ahogy azt már jól sejted, lehetővé teszi számunkra, hogy csak azokat az anchor tageket célozzuk be az oldalon, amikre már kattintottak vagy amiket meglátogattak.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
7. X + X
ul + p { color: red; }
Ezt szomszédos szelektornak nevezik. Csak azokat az elemeket választja ki, amik közvetlenül ebben a sorrendben követik egymást. Ebben az esetben az egyes ul
-ek utáni bekezdések közül az első lesz piros szöveg
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
8. X > Y
div#container > ul { border: 1px solid black; }
A különbség a hagyományos X Y
és az X > Y
között az, hogy az utóbbi csak a közvetlen gyermeket választja ki. Például nézzük meg a következő jelölést.
<div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
Egy #container > ul
szelektor csak azokat az ul
-eket jelöli, amelyek közvetlen gyermekei a container
id
-jű div
-nek. Nem fogja megcélozni például azt az ul
elemet, ami az első li
gyermeke.
Ebből az okból kifolyólag teljesítménybeli előnyt jelent a gyermek szelektor használata. Ezen kívül különösen akkor ajánlott, amikor JavaScript-alapú CSS szelektor motorokat használunk.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
9. X ~ Y
ul ~ p { color: red; }
Ez a testvér kombinátor hasonló az X + Y
-hoz, de ugyanakkor kevésbé szigorú. Míg a szomszédos szelektor (ul + p
) csak az adott szelektor közvetlen leszármazottját jelöli, ez sokkal általánosabb. Ez ki fogja választani, ahogy a fenti példán is látszik, minden p
elemet mindaddig, amíg egy ul
-t követnek.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
10. X[title]
a[title] { color: green; }
Ezt attribútum szelektorként emlegetik, a fenti példánkban csak azokat az anchor tageket választja ki, melyeknek van title
attribútuma Az ezzel nem rendelkező ancor tagek nem fogják megkapni ezt az adott stilizálást. De mi van akkor, ha sokkal pontosabbnak kell lenned? Nos...
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
11. X[href="foo"]
a[href="https://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }
A fenti kódrészlet az összes olyan anchor taget fogja stilizálni, amelyik a https://net.tutsplus.com-ra mutat; mindegyik a márkánk zöld színét fogja megkapni. Az összes többi anchor tag érintetlen fog maradni.
Figyelj rá, hogy az értékeket idézőjelbe tettük. Emlékezz erre akkor is, amikor egy JavaScript CSS szelektor motort használsz. Ha csak lehetséges, mindig a CSS3 szelektorokat használd a nemhivatalos módszerek helyett.
Ez elég jól működik, bár egy kicsit merev. Mi van akkor, ha a linknek közvetlenül a Nettuts+-ra kell mutatnia, de az útvonal csak nettuts.com a teljes url helyett? Ezekben az esetekben használhatunk egy kis regurális kifejezés szintaxist.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
12. X[href*="nettuts"]
a[href*="tuts"] { color: #1f6053; /* nettuts green */ }
Itt is van; pont erre van szükségünk. A csillag azt jelenti, hogy az azt követő értékben valahol meg kell jelennie az attribútum értékének. Ily módon ez lefedi a nettuts.com, a net.tutsplus.com, sőt a tutsplus.com címeket is.
Ne feledd, hogy ez egy általános feltétel. Mi van akkor, ha az anchor tag valamilyen nem-Envatos oldalra mutat, aminek az url-jében benne van a tuts string? Ha sokkal pontosabbnak kell lenned, akkor használd a ^
és $
szimbólumokat, hogy egy string elejét és végét jelöld.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
13. X[href^="http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
Gondolkoztál már azon, hogy hogyan tud néhány weboldal egy kis ikont megjeleníteni a külső linkek mellett? Biztos vagyok benne, hogy láttál már ilyet; kedves figyelmeztetők, hogy a link egy teljesen más weboldalra fog téged irányítani.
Ez egy kis szimbólum. Általában a reguláris kifejezésekben használják, hogy megadják egy string kezdetét. Ha szeretnénk minden href
-es anchor taget megjelölni, ami http
-vel kezdődik, akkor a fenti kódrészlethez hasonló szelektort is használhatunk.
Figyelj rá, hogy nem keressük a
https://
-t; az felesleges, és nem számítja bele azokat az url-eket, amikhttps://
-sel kezdődnek.
Szóval mi van akkor, ha minden linkkel rendelkező anchor stílusa helyett mondjuk fényképre szeretnénk azt használni? Ebben az esetben keressük a string végét.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
14. X[href$=".jpg"]
a[href$=".jpg"] { color: red; }
Ismét egy reguláris kifejezés szimbólumot használunk, a $
-t, hogy a string végére utaljunk. Ebben az esetben az összes olyan anchort keressük, ami egy képhez kapcsolódik – vagy legalábbis .jpg
az url vége. Figyelj rá, hogy ez biztos nem fog működni gif
-ekre és png
-kre.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
15. X[data-*="foo"]
a[data-filetype="image"] { color: red; }
Itt visszautalunk a nyolcas pontra; hogyan tudjuk az összes, különböző képtípust használni: png
, jpeg
, jpg
, gif
? Nos, létrehozhatunk több szelektort is, például:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
De ez időigényes, és még csak nem is hatékony. Másik lehetőség egy egyéni attribútum használata. Mi van akkor, ha hozzáadjuk a saját data-filetype
attribútumunkat minden egyes anchorhoz, ami egy képre mutat?
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Ekkor egy horgonnyal használhatunk egy szokványos attribútum szelektort, hogy csak azokat az anchorokat válasszuk ki.
a[data-filetype="image"] { color: red; }
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
16. X[foo~="bar"]
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
Itt egy speciális megoldás, amivel lenyűgözheted a barátaidat. Nem sokan tudnak erről a trükkről. A tilde (~
) szimbólum lehetővé teszi számunkra egy attribútum célzását, ami értékek szóközzel elválasztott listájával rendelkezik.
Tovább haladva a fenti, tizenötös számú egyéni attribútumunkkal, létrehozhatunk egy data-info
attribútumot, ami egy szóközzel elválasztott listát képes fogadni bármiről, amit szeretnénk kiemelni. Ebben az esetben a külső és a képekre mutató linkeket emeltük ki – csak a példa kedvéért.
"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
Ezzel a jelölővel megcélozhatunk bármilyen taget, ami ezekkel az értékekkel rendelkezik, a ~ attribútum szelektor trükk használatával.
/* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; }
Nagyon klassz, ugye?
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
17. X:checked
input[type=radio]:checked { border: 1px solid black; }
Ez a pszeudo osztály csak egy olyan felhasználói felületi elemet céloz be, amit bekattintottak – például egy rádiógombot vagy jelölőnégyzetet. Ilyen egyszerű.
Kompatibilitás
- IE9+
- Firefox
- Chrome
- Safari
- Opera
18. X:after
A before
és after
pszeudo osztályok nagyon királyak. Úgy tűnik, minden nap találnak az emberek új és kreatív módokat ezek hatékony használatára. Egyszerűen tartalmat generálnak a kiválasztott elem körül.
Ezeknek az osztályoknak a legtöbbje akkor lett először bemutatva, amikor a clear-fix hackkel találkoztak.
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
Ez a hack az :after
pszeudo osztályt arra használja, hogy hozzáfűzzön egy térközt az elem után, majd kitisztítsa azt. Ez egy kiválló trükk, aminek helye van az eszköztáradban, különösen olyan esetekben, amikor az owerflow: hidden;
módszer nem lehetséges.
Ennek másik kreatív használatához nézd meg árnyékok létrehozása gyorstippemet.
A CSS3 szelektorok leírása szerint technikailag a dupla kettőspont (
::
) pszeudo elem szintaxist kellene használnod. Ugyanakkor a kompatibilitás érdekében a user-agentek egy kettőspontos használatát is elfogadják. Valójában ezen a ponton okosabb az egyszeri kettőspont változatot használni a projektjeidben.
Kompatibilitás
- IE8+
- Firefox
- Chrome
- Safari
- Opera
19. X:hover
div:hover { background: #e3e3e3; }
Ugyan már. Ezt biztos ismered. A hivatalos kifejezés erre a user action pszeudo class
(felhasználói cselekvés pszeudo osztály). Ez zavarónak tűnhet, de valójában nem az. Szeretnél egy bizonyos stílust alkalmazni, amikor egy felhasználó ráviszi az egeret az egyik elemre? Ez el fogja végezni!
Figyelj rá, hogy az Internet Explorer régebbi verziója nem reagál, ha a
:hover
pszeudo osztályt az anchor tagtől eltérő elemre rakod.
Leggyakrabban akkor fogod használni ezt a szelektort, amikor például border-bottom
-ot adsz az anchor taghez, amikor fölé viszed az egeret.
a:hover { border-bottom: 1px solid black; }
Pro-tipp – a
border-bottom: 1px solid black
; jobban néz ki, mint atext-decoration: underline;
.
Kompatibilitás
- IE6+ (IE6-ban a :hovernek egy anchor elemhez kell kapcsolódnia)
- Firefox
- Chrome
- Safari
- Opera
20. X:not(selector)
div:not(#container) { color: blue; }
A negation
(negáció) pszeudo osztály különösen hasznos lehet. Mondjuk szeretnénk az összes divet kiválasztani, kivéve azt, ami container
id
-vel rendelkezik. A fenti kódrészlet tökéletesen kezeli ezt a feladatot.
Vagy ha szeretnék minden egyszerű elemet (nem javasolt) kiválasztani, kivéve a bekezdés tageket, azt is megtehetjük:
*:not(p) { color: green; }
Kompatibilitás
- IE9+
- Firefox
- Chrome
- Safari
- Opera
21. X::pseudoElement
p::first-line { font-weight: bold; font-size: 1.2em; }
Használhatunk pszeudo elemeket (::
jelöli) egy elemrészlet stilizálására, mint például az első sor vagy az első betű. Figyelj rá, hogy ezeket blokk szintű elemekhez kell rendelni annak érdekében, hogy legyen hatása.
Egy pszeudo-elem két kettőspontból áll:
::
Egy bekezdés első betűjének célzása
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
Ez a kódrészlet megkeres minden bekezdést az oldalon, és utána csak azok első betűjét választja ki.
Ezt leggyakrabban az újságszerű stilizálásra használják, a cikk első betűjénél.
Egy bekezdés első sorának célzása
p::first-line { font-weight: bold; font-size: 1.2em; }
Hasonlóképp a ::first-line
pszeudo elem, ahogy várható, az elemnek csak az első sorát stilizálja.
"A már létező stíluslapokkal való kompatibilitás érdekében a user-agenteknek el kell fogadniuk a korábbi, egy kettőspontos jelzést is a pszeudo elemeknek, ahogyan az a CSS 1 és 2 szinteken be lett vezetve (név szerint :first-line, :first-letter, :before és :after). Ez a kompatibilitás nem megengedett az ebben a specifikációban bevezetett új pszeudo elemeknél." – Forrás
Kompatibilitás
- IE6+
- Firefox
- Chrome
- Safari
- Opera
22. X:nth-child(n)
li:nth-child(3) { color: red; }
Emlékszel még azokra az időkre, amikor nem volt mód arra, hogy bizonyos elemeket célozz be egy halomból? Az nth-child
pszeudo osztály megoldja ezt!
Kérjük figyelj rá, hogy nth-child
egy integer számot fogad el paraméterként, de nem lehet zéróalapú. Amennyiben a második listaelemet szeretnéd megcélozni, használd a li:nth-child(2)
-t.
Ezt arra is használhatjuk, hogy egy kupac gyermeket kiválasszunk. Például a li:nth-child(4n)
minden negyedik listaelemet választja ki.
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
Mi van akkor, ha van egy hatalmas listányi elemünk egy ul
-ben, és mondjuk csak a hátulról harmadik elemhez szeretnénk hozzáférni? Ahelyett, hogy a li:nt-child(397)
-et használnánk, igénybe vehetjük helyette az nth-last-child
pszeudo osztályt.
Ez a technika majdnem ugyanúgy működik, mint a tizenhatos számú, de azzal a különbséggel, hogy a lista végével kezdődik és visszafelé halad.
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
Előfordulhat, hogy ahelyett, hogy kiválasztanánk egy child
-ot (gyermeket), arra lenne szükséged, hogy az elem type
tulajdonsága szerint válasszunk.
Képzeld el, hogy van öt felsorolásod. Ha szeretnéd csak a harmadik ul
-t stilizálni, és nincsen egyedi id
-d, amibe kapaszkodhatsz, akkor használhatod az nth-of-type(n)
pszeudo osztályt. A fenti kódrészletben csak a harmadik ul
-nek lesz szegélye.
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
És igen, hogy következetesek maradjunk, használhatjuk az nth-last-of-type
-ot is, ami a szelektorok listájának végéről kezdi, és visszafelé halad a kívánt elemhez.
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
26. X:first-child
ul li:first-child { border-top: none; }
Ez a szerkezeti pszeudo osztály lehetővé teszi számunkra, hogy az elem szülőjének a legelső gyermekét célozzuk be. Gyakran fogod ezt használni arra, hogy az első és utolsó listaelem szegélyét eltávolítsd.
Mondjuk például, hogy van egy csomó sorod, és mindegyiknek egy border-top
és egy border-bottom
tulajdonsága. Nos, így az első és az utolsó elem egy kicsit furcsán fog kinézni.
Sok fejlesztő first
és last
osztályokat rendel hozzájuk, hogy ezt kompenzálják. Ehelyett használhatod ezeket a pszeudo osztályokat.
Kompatibilitás
- IE7+
- Firefox
- Chrome
- Safari
- Opera
27. X:last-child
ul > li:last-child { color: green; }
A first-child
ellentéteként a last-child
az elem szülőjének utolsó gyermekét célozza be.
Példa
Készítsünk egy egyszerű példát, hogy demonstráljuk ezen osztályok egy lehetséges felhasználási módját. Készítünk egy stilizált listaelemet.
Jelölés
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>
Ebben nincs semmi speciális; csak egy egyszerű lista.
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 stilizálás beállítja a hátteret, eltávolítja a böngészőben alapértelmezett térközt az ul
-ről, és szegélyeket rak minden egyes li
elemhez, hogy egy kis mélységet adjon nekik.

Ahhoz, hogy mélységet adj a listáidnak, minden egyes
li
elemhez rakj be ali
háttérszínénél egy-két árnyalattal sötétebbborder-bottom
-ot. Ezután tegyél hozzá egyborder-top
-ot, ami pár árnyalattal világosabb.
Az egyetlen probléma, ahogy az a fenti képen is látszik, hogy a szegély hozzárendelődik a felsorolás tetejéhez és aljához is – ami elég furcsán néz ki. Használjuk a :first-child
és :last-child
pszeudo osztályokat ennek kijavítására.
li:first-child { border-top: none; } li:last-child { border-bottom: none; }

Kész is vagyon; ez kijavította!
Kompatibilitás
- IE9+
- Firefox
- Chrome
- Safari
- Opera
Na ja – az IE8 támogatja a :first-child
-ot, de a :last-child
-ot nem. Na most igazodj ki ezen.
28. X:only-child
div p:only-child { color: red; }
Az igazat megvallva, valószínűleg nem fogod az only-child
pszeudo osztályt túl gyakran használni. Ettől függetlenül elérhető, ha mégis szükséged lenne rá.
Lehetővé teszi, hogy a szülőnek csak a gyermek elemeit célozd be. Például a fenti kódrészletre utalva, az egyetlen bekezdés, ami a div
egyetlen gyermeke, piros színű lesz.
Tételezzü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 div
bekezdése nem lesz becélozva; csak az első div
. Amint több mint egy elemet alkalmazol, az only-child
pszeudo osztály nem fejti ki hatását.
Kompatibilitás
- IE9+
- Firefox
- Chrome
- Safari
- Opera
29. X:only-of-type
li:only-of-type { font-weight: bold; }
Ezt a szerkezeti pszeudo osztályt többféle okos módon is lehet használni. Azokat az elemeket célozza be, amiknek nincs testvére a szülő konténeren belül. Például célozzunk be minden ul
-t, aminek csak egy listaeleme van.
Először kérdezd meg magadtól, hogyan végeznéd el ezt a feladatot? Tudsz ul li
-t használni, de az minden listaelemet becélozna. Az egyetlen megoldás az only-of-type
használata.
ul > li:only-of-type { font-weight: bold; }
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
30. X:first-of-type
A first-of-type
pszeudo osztály lehetővé teszi számodra, az adott típus első testvérének kiválasztását.
A próba
Hogy jobban megértsük ez, tegyünk egy próbát. Másold be a következő kódot a kódszerkesztődbe:
<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, mielőtt tovább olvasnál, próbáljuk meg kitalálni, hogyan lehet megcélozni csak a "List Item 2"-t. Ha rájöttél (vagy feladtad), olvass tovább.
1. megoldás
Többféle módja van ennek a próbának a megoldására. Meg fogunk nézni párat közülük. Kezdjük először a first-of-type
használatával.
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
Ez a kódrészlet alapvetően azt mondja: "találd meg az első felsorolást az oldalon, aztán annak a közvetlen gyermekét, ami listaelem. Ezután szűrd rá csak a második listaelemre abban a szettben.
2. megoldás
Egy másik lehetőség a szomszédos szelektor használata.
p + ul li:last-child { font-weight: bold; }
Ebben a forgatókönyvben megtaláljuk az ul
-t, ami automatikusan továbblép a p
tagre, és aztán megkeresi az elem legutolsó gyermekét.
3. megoldás
Ezekkel a szelektorokkal annyira utálatosak vagy játékosak lehetünk, amennyire csak szeretnénk.
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
Ezúttal fogjuk az első ul
-t az oldalon, és utána megkeressük az első listaelemet, de az aljáról kezdve! :)
Kompatibilitás
- IE9+
- Firefox 3.5+
- Chrome
- Safari
- Opera
Konklúzió
Amennyiben az olyan régi böngészők számára szeretnél kompenzálni, mint az Internet Explorer 6, továbbra is körültekintőnek kell lenned, ha ezeket az újabb szelektorokat szeretnéd használni. De kérlek, ez ne tartson vissza attól, hogy megtanuld ezeket. Jelentős mértékben megkönnyíted velük a saját dolgodat. Győződj meg róla, hogy benne van a böngésző-kompatibilitási listában. Alternatívaként használhatod Dean Edward kiváló IE9.js szkriptjét, hogy ezeket a szelektorokat a régebbi böngészőkben is támogasd.
Másodsorban, amikor olyan JavaScript könyvtárakkal dolgozol, mint a népszerű jQuery, ha csak lehetséges, mindig próbáld meg ezeket a natív CSS3 szelektorokat használni a könyvtár egyéni módszerei/szelektorai helyett. Gyorsabban fogsz tudni kódolni, ha a szelektor motor a böngésző natív parsolását használja, mintha a sajátodat használná.
Köszönöm, hogy elolvastad, és remélem, hogy találtál pár hasznos trükköt!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post