A szelektoraink attribútummal is rendelkezhetnek, amelyek segítségével feltételeket fogalmazhatunk meg az általunk szelektált elemek attribútumaira. Ezek a szelektor-attribútumok szögletes zárójelek között helyezkednek el.
A fenti felsorolás első (sőt második) olvasásra elég bonyolultnak tűnhet, ezért az alábbiakban konkrét interaktív példákon mutatjuk be a használati módjukat.
A szelektor[attribútum] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal.
Minta: szelektor[attribútum] {definíció}
A fenti példában három képet helyeztünk el egymás mellett. Az alkalmazott szabály azt jelenti, hogy azon képek, amelyek rendelkeznek width attribútummal, legyenek ellátva vastag, piros szegéllyel.
A szelektor[attribútum="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, ami rendelkezik a megadott értékkel.
Minta: szelektor[attribútum="érték"] {definíció}
A példa ugyanaz, mint előbb, de most az is megadtuk, hogy azon képeket akarjuk szegéllyel ellátni, amelyeknek van width attribútuma és annak értéke 100.
A szelektor[attribútum~="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értékének a megadott érték egy szóközök által határolt részsorozata.
Minta: szelektor[attribútum~="érték"] {definíció}
Csak azon linkek háttere lesz sárga, amelyek title attribútumában szerepel az ELTE szó.
Korábban bemutattuk az osztályok (class) használatát. Ez azonban attribútum szelektorral is leírhatók lenne. A p.fontos szelektor helyett akár azt is írhatnánk, hogy p[class~="fontos"].
A szelektor[attribútum|="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, és ha igen, akkor az értéke tartalmazza-e a megadott értéket egy kötőjelek által határolt részsorozatként.
Közelítsük meg onnan ezt a fajta attribútum szelektort, hogy vajon miért volt szükség a bevezetésére? Ha például egy szövegnél jelezni akarjuk annak nyelvét, akkor használhatjuk a lang attribútumot. A nyelvkódok között viszont számos olyat találunk, amelyekben kötőjel szerepel, pl. en-gb, en-us, vagyis nyelvváltozatokra utalnak (brit angol, amerikai angol).
De mi van akkor, ha mi azon elemeket akarnánk megcímezni, amelyek angol nyelven íródtak, és számunkra érdektelen, hogy melyik nyelvváltozatban? Akkor egy olyan szelektorra van szükségünk, amely a kötőjelek előtti karakterláncra való illeszkedést is tudja kezelni.
Erről szól a következő példánk is:
Minta: szelektor[attribútum|="érték"] {definíció}
Mindegy, hogy amerikai, vagy brit angol nyelvjárás szerint írtunk, kék lesz a szöveg színe.
A szelektor[attribútum^="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értékkel kezdődik.
Minta: szelektor[attribútum^="érték"] {definíció}
A fenti példában azon képeken jelenik meg piros szegély, amelyeknek a szélesség (width) attribútuma 1-essel kezdődik.
A szelektor[attribútum$="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értékkel végződik.
Minta: szelektor[attribútum$="érték"] {definíció}
A fenti példában azon képeken jelenik meg piros szegély, amelyeknek a szélesség (width) attribútuma ötössel végződik.
A szelektor[attribútum*="érték"] esetén azt vizsgáljuk, hogy a szelektált elem rendelkezik-e a keresett attribútummal, amely értéke a megadott értéket tartalmazza.
Minta: szelektor[attribútum*="érték"] {definíció}
A fenti példában azon képeken jelenik meg piros szegély, amelyeknek az egyedi azonosítója tartalmazza az "ember" karakterláncot.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.