CSS3 szelektorok: szerkezeti pszeudo-osztályok

Mik is azok a pszeudo-osztályok?

A CSS pszeudo-osztályokkal olyan elemeket tudunk megcélozni, amelyeket az egyszerű id vagy osztály szelektorokkal nem. A pszeudo-osztályokkal az elemeket tulajdonságaik, állapotuk vagy relatív elhelyezkedésük alapján tudjuk kiválasztani. Eddig is léteztek pszeudo-osztályok a CSS-ben, például a :hover pszeudo-osztály, ezt biztosan sokan ismerik.

Pár ismertebb pszeudo-osztály:

• :link
• :visited
• :hover
• :active
• :focus

A CSS3-ban sok új pszeudo-osztályt kapunk szerencsére, beleértve a szerkezeti pszeudo-osztályokat is, amelyekkel az elemeket a dokumentumfában való elhelyezkedésük, vagy egymáshoz való pozíciójuk alapján lehet kiválasztani. Lássuk ezeket az új pszeudo-osztályokat:

• :root
• :empty
• :only-child
• :first-child
• :last-child
• :nth-child(n)
• :nth-last-child(n)
• :only-of-type
• :first-of-type
• :last-of-type
• :nth-of-type(n)
• :nth-last-of-type(n)

Mielőtt áttekintjük őket egyesével, nézzük meg hogyan is kell használni szintaktikailag a pszeudo-osztályokat.

A pszeudo-osztály szintaktika

A pszeudo-osztály neve előtt egy „:” kettőspontnak kell állni, valahogy így:

:pszeudo-osztály {}

Ha egy bizonyos elemet (elem) szeretnénk megcélozni, akkor az elem után írjuk a pszeudo-osztályt, példa:

elem:pszeudo-osztály {}

Természetesen a pszeudo-osztályokat használhatjuk az id és osztály szelektorokkal együtt is.

#id:pszeudo-osztály {}

.osztály:pszeudo-osztály {}

Szám értékek, mint paraméter

Némely CSS3 pszeudo-osztályt elláthatunk paraméterrel is, például ha egy elemet az elhelyezkedése alapján szeretnénk kiválasztani, akkor azt megtehetjük egy (n) egészszám paraméter átadásával.

:pszeudo-osztály(n) {}

Az (n) érték egészszám és az elem pozícióját határozza meg a dokumentumfában. A következő példa a harmadik elemet fogja kiválasztani:

:pszeudo-osztály(3) {}

Ha viszont azt szeretnénk, hogy minden ötödik elemet válasszuk csak ki, akkor azt a következőképpen tehetjük meg:

:pszeudo-osztály(5n) {}

Ezt tudjuk még egy ofszeteléssel megtoldani, az eltolás mértéke lehet negatív is (alapból 0), példa:

:pszeudo-osztály(5n+1) {}

Valamint használhatjuk kiválasztásra a páros-páratlan megkülönböztetést is:

:pszeudo-osztály(odd) {}

Fogjuk munkára a pszeudo-osztályokat

Most, hogy már tisztában vagyunk azzal, hogy is lehet őket használni, nézzük meg az új pszeudo-osztályokat részletesebben is.

:root

A :root pszeudo-osztály a root elemet veszi célba. Vagyis HTML esetén, a html tag-et fogja kiválasztani.

:empty

Az :empty az üres elemeket tudjuk kiválasztani vele, például egy <p></p> üres paragrafust.

:only-child

Az :only-child azokat az elemeket választja ki, amelyek egyedüli gyermek elemek a szülő elemen belül. Példa:

CSS: span:only-child { color:red; }

HTML:

<div>
    <span>Ez a span elem egyetlen gyermeke az ő szülő (div) elemének</span>
</div>
<div>
    <span>Ez a span elem egy két gyermekes szülő tagja</span>
    <span> Ez a span elem egy két gyermekes szülő tagja </span>
</div>

Eredmény:

Ez a span elem egyetlen gyermeke az ő szülő (div) elemének

Ez a span elem egy két gyermekes szülő tagja Ez a span elem egy két gyermekes szülő tagja

:first-child

A szülő elem első gyermekét fogja kiválasztani, de csak akkor, ha az első gyermek típusa meg egyezik a kérttel. Példa:

A html váz:
<div>
    <span>span elem</span>
    <p>p elem</p>
</div>

CSS:

p:first-child {color: red;}

A fenti példán nem lesz egy sor sem piros, mert a szülő (div) elem első gyermeke nem <p>.

:last-child

Működése megegyezik a :first-child pszeudo-osztályéval, kivéve, hogy az utolsó gyermekre próbálja értelmezni a formázást.

:nth-child(n)

Ez egy nagyon hasznos pszeudo-osztály, a cél elemeket a szülőn belüli relatív elhelyezkedés alapján választja ki. Az (n) paraméterrel adhatjuk meg, hogy hányadik elemet vagy elemeket akarjuk kiválaszttatni, ráadásul lehet ofszetelni is.

li:nth-child(3) {} - a lista elemekből a harmadikat fogja kiválasztani
li:nth-child(2n) {} - a lista elemekből minden másodikat fogja kiválasztani
li:nth-child(2n+3) {} - a lista elemekből minden másodikat fogja kiválasztani, de csak a harmadik elemtől kezdve.
li:nth-child(odd) - (n) paraméterként használhatjuk az odd (páratlan) és even (páros) szavakat is.

Figyeljünk azonban arra, hogy nem veszi figyelembe a gyermekek típusát a sorrendben! Részletek az :nth-of-type leírásnál.

:nth-last-child(n)

Működésileg megegyezik a :nth-child(n) pszeudo-osztállyal, azt kivéve, hogy a szülőn belüli relatív elhelyezkedést az utolsó elemtől fogja számolni, és nem az elsőtől mint a :nth-child(n).

:only-of-type

Az :only-of-type picit hasonlít az :only-child pszeudo-osztályra, csak azokat az elemeket választja ki, amelyek egyedül vannak a szülő elemben, pontosabban akkor választódik az elem, ha a szülő elem csak egyetlen ilyen típusú elemet tartalmaz. Kis segítség:

CSS: span:only-of-type { color:red; }

HTML:
<div>
    <span>Ez a span elem „testvér” nélküli gyermeke az ő szülő (div) elemének, bár a szülő tartalmaz más elemet</span>
    <p>ez egy paragrafus</p>
</div>
<div>
    <span>Ennek a span elemnek van egy „testvére” a szülőn (div) belül</span>
    <span>Ennek a span elemnek van egy „testvére” a szülőn (div) belül </span>
</div>

Eredmény:

Ez a span elem „testvér” nélküli gyermeke az ő szülő (div) elemének, bár a szülő tartalmaz más elemet

ez egy paragrafus

Ennek a span elemnek van egy „testvére” a szülőn (div) belül Ennek a span elemnek van egy „testvére” a szülőn (div) belül

:first-of-type

A :first-of-type kiválasztja az összes kívánt elem típusból az elsőket, minden szülő elemben. Példa:

HTML:

<ul>
    <li>elem</li>
    <li>elem</li>
    <li>elem</li>
</ul>
<ul>
    <li>elem</li>
    <li>elem</li>
    <li>elem</li>
</ul>

CSS: li:first-of-type {background-color: red;}

Mind a két lista első <li> elemét pirosra színezzük.

:last-of-type

Megegyezik a :first-of-type pszeudo-osztállyal kivéve, hogy nem az első, hanem az utolsó elem lesz kiválasztva.

:nth-of-type(n)

Az :nth-of-type hasonlóan működik a többi szám alapú (számmal paraméterezhető) pszeudo-osztályhoz. Valamint nagyon hasonló a működése a :nth-child pszeudo-osztályéval, de sokkal specifikusabb attól, lássuk a két osztály működését pontosabban.

Vegyük az alábbi html vázat például:

<div>
    <p>első p elem</p>
    <span>első span elem</span>
    <p>második p elem</p>
    <span>második span elem</span>
    <p>harmadik p elem</p>
    <p>negyedik p elem</p>
</div>
<div>
    <p>első p elem</p>
    <p>második p elem</p>
    <p>harmadik p elem</p>
    <p>negyedik p elem</p>
</div>

Alkalmazzuk ezt a formázást először:

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

Eredményül ezt kapjuk:

első p elem
első span elem
második p elem
második span elem
harmadik p elem
negyedik p elem
első p elem
második p elem
harmadik p elem
negyedik p elem

Láthatóan az első div-ben lévő „második p elem” nem színeződött el, a második div-ben lévő viszont igen, ennek azaz oka, hogy a p:nth-child(2) esetén a szülő div-ben lévő gyermekeket mindet figyelembe veszi, és amennyiben a második elem <p> akkor arra alkalmazza is a formázást, viszont esetünkben a második elem <span> lesz, így azt nem formázza meg.

Ezzel szemben, ha ezt alkalmazzuk

p:nth-of-type(2) {color: red;}

Az eredmény láthatóan eltér:

első p elem
első span elem
második p elem
második span elem
harmadik p elem
negyedik p elem
első p elem
második p elem
harmadik p elem
negyedik p elem

Piros lett az első div-ben lévő „második p elem” is. Azért mert a p:nth-of-type(2) pszeudo-osztály alkalmazásakor a <p> szülőjében nem minden gyermeket fog figyelembe venni, csak a <p> gyermekeket, így ha <p> szerepel második elemként, akkor arra alkalmazza a formázást.

Ilyen eseteknél, ha minden n-edik típusra szeretnénk alkalmazni egy formázást, akkor ajánlott az :nth-of-type(n)-t használni az :nth-child(n)-val szemben, a fenti példákban látható okok miatt.

:nth-last-of-type(n)

Működésileg megegyezik az :nth-of-type(n) pszeudo-osztállyal, viszont ahogy az :nth-last-child(n)-nél is történt itt is az utolsó gyermektől visszafelé kell értelmezni a relatív elhelyezkedést.

Böngésző támogatottság

Egész jól állunk a támogatottság terén, már az Internet Explorer 9 és 10 is támogatja ezeket a pszeudo-osztályokat.

A régebbi böngészők azonban csak korlátozottan támogatják a CSS3 szelektorokat.

tipp: HTML5 és CSS3 támogatás ellenőrzés eszköz: http://caniuse.com/

Ha régebbi típusú Internet Explorerre kell CSS3 szelektor támogatás, akkor egy kis javascriptes segítséggel az is megoldható: http://selectivizr.com/