30 CSS szelektor, amit mindenképp ismerned kell

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 margint és a paddingot. 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.

Demó megtekintése

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.

Demó megtekintése

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 classokat 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.

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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...

Demó megtekintése

Kompatibilitás

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

A fenti kódrészlet az összes olyan anchor taget fogja stilizálni, amelyik a http://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.

Demó megtekintése

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.

Demó megtekintése

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 http://-t; az felesleges, és nem számítja bele azokat az url-eket, amik https://-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.

Demó megtekintése

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.

Demó megtekintése

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;
}

Demó megtekintése

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?

Demó megtekintése

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ű.

Demó megtekintése

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 a text-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;
}

Demó megtekintése

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

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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.

Demó megtekintése

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 a li háttérszínénél egy-két árnyalattal sötétebb border-bottom-ot. Ezután tegyél hozzá egy border-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!

Demó megtekintése

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.

Demó megtekintése

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;
}

Demó megtekintése

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! :)

Demó megtekintése

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!