CSS3 szelektorok: egyéb pszeudo-osztályok

UI elemek állapot alapú pszeudo-osztályai 

Míg a szerkezeti pszeudo-osztályok az elhelyezkedés alapján választottak ki elemeket, addig az állapot alapú pszeudo-osztályok az elemeket az állapotuk alapján választják ki, például, ha egy elem éppen aktív (:active). Ezekkel a pszeudo-osztályokkal már a CSS1 idején megismerkedhettünk (úgy mint: :link, :visited, :hover vagy :active).

A CSS2.1-nél behozták a :focus pszeudo-osztályt ezzel kiterjesztve a pszeudo-osztályokat a linkről a form elemekre úgy, mint az input vagy textarea elemekre. A CSS3 további három állapotalapú pszeudo-osztályt terjeszt ki, ezek a következők: :disabled, :enabled, :checked.

A pszeudo-osztályok használata

Ahogy az előző cikkben már tárgyaltuk, a pszeudo-osztályokat lehet alkalmazni elemekre (e), azonosítókra (#ID) és osztályokra (.osztaly), a következő szintaktikával:

e:pszeudo-osztály {}
.osztaly:pszeudo-osztály {}
#id: pszeudo-osztály {}

Az állapotalapú pszeudo-osztály esetében a böngésző, akkor alkalmazza az adott UI elemre, amikor a kiválasztott állapot bekövetkezik az UI elemen. A következő példában az adott stílus, akkor alkalmazódik a link elemekre, ha a felhasználó az egeret a linkre húzza (hover esemény). Ez minden link elemre igaz lesz.

CSS: a:hover {background-color: red;}

:disabled

A :disabled pszeudo-osztály azokra az elemekre vonatkozik, melyeknek van disabled tulajdonságuk, mely az elemet használhatatlanná, vagy „klikkelhetetlenné” teszi, vagyis letiltja az elemet. Példa az elemre:

<input type="text" name="name" disabled />

Ez esetben a HTML5 boolean tulajdonság szintaktikájával éltünk, de használhatjuk a régebbi formát is:

<input type="text" name="name" disabled="disabled" />

Mind a két esetben a legtöbb böngésző ilyenkor egy letiltott elemet fog készíteni, szürke kerettel (vagy szürke háttérrel, ez böngésző függő), valahogy így:

-

Viszont tudjuk használni a :disabled pszeudo-osztályt, hogy felülírjuk ezt a stílust, valahogy így:

input:disabled {
    background-color: #ccc;
    border: 0;
    padding: 3px 2px;
}

Ezt a hatást elérhetjük a tulajdonság szelektorokkal is, de csak akkor, ha nem a HTML5 boolean típusú disabled tulajdonság szintaktikáját használjuk.

input[disabled="disabled"] {
    background-color: #ccc;
    border: 0;
    padding: 3px 2px;
}

Hogy melyik szelektort használjuk, az a mi döntésünk.

:enabled

Az a pszeudo-osztály az alapállapotú elemeket célozza meg, melyek állapota engedélyezett, vagyis a :disabled ellentéte.

input:enabled {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(125,104,99);
}

:checked

A :checked pszeudo-osztály azon radio és checkbox elemeket célozza meg, melyek ki vannak választva (selected/checked). Ez megengedi számunkra, hogy mind az előre kiválasztott, mind a felhasználó által kiválasztott elemeket adott stílussal lássuk el. Jegyezzük meg viszont, hogy ezeket az inputokat a különböző böngészők, különböző képp engedik formázni.

input:checked {
    border: 1px solid rgb(255, 0, 0);
}

Mivel egyéb szelektorokat ki lehet egészíteni pszeudo-osztályokkal, azért még specifikusabban is ki lehet választani egy egy input elemet, például így:

input[type="radio"]:checked {
    border: 1px solid rgb(255, 0, 0);
}

A :target pszeudo-osztály

Az URL-ek végén a # után áll a horgony név, amellyel linkelhetünk, navigálhatunk a dokumentumon belülre. A :target pszeudo-osztály az éppen aktív cél elemen hajtja végre a formázást. A könnyebb érthetőség kedvéért nézzük meg a következő példát:

CSS div:target {background-color: red;}

HTML:
<nav>
    <a href="#egy">1</a>
    <a href="#ketto">2</a>
    <a href="#harom">3</a>
</nav>

<section>
    <div id="egy"><h2>Egy</h2>szöveg ...</div>
    <div id="ketto"><h2>Kettő</h2>szöveg ...</div>
    <div id="harom"><h2>Három</h2>szöveg ...</div>
</section>

A negáció pszeudo-osztály

A negáció pszeudo-osztály formailag a következőképp néz ki:

:not(e)

Kiválasztja azon elemeket, melyek nem egyeznek a zárójelben megadott elemmel (e).

Például, ha van egy div elemünk amiben találunk <p>,<a>,<h1>,<h2> elemeket,de mi a <p> elemeken kívül mindegyikre akarunk egy stílust alkalmazni, akkor azt a következőképp tehetjük meg:

CSS: div:not(p) {background-color: red;}

HTML:
<div>
    <h1>H1 elem, ez piros lesz</h1>
    <p>P elem, ez nem lesz piros</p>
    <span>SPAN elem, ez szintén piros lesz</span>
</div>

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/