Jellemzőkijelölők - Attribute selectors

Egyszerű Jellemzőkijelölő

Ennek segítségével kijelölhetünk egy elemet annak alapján, hogy az elem tartalmaz-e egy adott jellemzőt. A jellemző értéke jelen esetben nem számít.
Használata:

 	elem1[jellemző] 	
Az elem neve után szögletes zárójelpáron belül adjuk meg a jellemző nevét.
Nézzünk egy példát!
Lássuk el sárga háttérrel azokat a HTML "a" tag-eket, amelyek rendelkeznek "title" tulajdonság értékével.

...

...
<body>	
    

Egyszerű Jellemzőkijelölő

linkelek ide
linkelek oda
Mégis itt maradok
</body>

A forráskód 3. sorában azt határoztuk meg, hogy azok az "a" elemek, amelyek rendelkeznek "title" jellemzővel, azok sárga háttérrel jelenjenek meg (title akkor érvényesül, ha a link felett megállítjuk az egérmutatót és egy kis ablakban megjelenik a title értéke). A 8. és a 10. sorban megadott linkek rendelkeznek ezzel a jellemzővel, míg a 9. sorban meghatározott hívatkozás nem. Ezért a jobb oldali minta ablakban két sárga hátterű link jelenik meg.

Egyszerű Jellemzőkijelölő

linkelek ide
linkelek oda
Mégis itt maradok

Pontosjellemzőérték-kijelölő

Az előző kijelölő szűkítése azokra, ahol még a jellemző értékének is meg kell egyeznie pontosan a megadottal.

Használata:
	elem1[jellemző="érték"] 	
Az elem neve után szögletes zárójelpáron belül adjuk meg a jellemző nevét, majd egy egyenlőségjel után macskakörmök között az értéket.
Nézzünk egy példát!
Legyen piros hátterű minden olyan hívatkozás, amely "title" tulajdonságának az értéke pontosan a következő: "Van 'title' tag-je" !

...

...
<body>	
    

Pontosjellemzőérték-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok
</body>

Itt is a forráskód 3. sorában van a stílus megadás. Figyeljük meg a pontos deklarációt. Az eredmény valóban csak a forráskód 10. sorára vonatkozik, így az ő háttere lesz piros. De vajon miért sárgítja be a 8. sorban található "a" tag-et? Bízony, ez az örökölhető tulajdonságok miatt van.

Pontosjellemzőérték-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok

Részlegesjellemzőérték-kijelölő

Kijelölhetjük azokat az elemeket, amelynek egy magadott tulajdonság tartalma szóközökkel elválasztva a többi részétől tartalmazza a feltételként megadott értékünket.

Használata:
  elem1[jellemző~="érték"] 
Az elem neve után szögletes zárójelpáron belül adjuk meg a jellemző nevét, majd egy"~" és utána közvetlenül egyenlőségjel után macskakörmök között az értéket (~ karaktert szokás Tilde-karakternek nevezni, a billentyűzeten AltGr+1 gombbal lehet előcsalogatni).
Nézzünk egy példát!
Szeretnénk zöld háttérrel kiemelni azokat a linkeket, amely "title" tulajdonság értéke tartalmazzaa "Rendelkezik" szót!

...

...
<body>	
    

Részlegesjellemzőérték-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok
</body>

A forráskód 3. sora tartalmazza a deklarációt. Ez a megadás csak azokra az "a" elemekre vonatkozik, amelyeknek meg van adva a "title" tulajdonságának az értéke, és azon belül vagy a legelején vagy a végén vagy pedig szóközökkel elhatárolva tartalmazza a feltételként megadott "Rendelkezik" értéket.

Részlegesjellemzőérték-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok

Nyelvijellemző-kijelölő

Kijelölhetjük azokat az elemeket, amelyeknek "lang" tulajdonsága megegyezik a feltételként megadott értékkel.

Használata:
  elem1[lang|="érték"] 
  				vagy
         [lang|="érték"] 
Az elem neve után szögletes zárójelpáron belül adjuk meg a lang jellemzőt, majd egy "|" és utána közvetlenül egyenlőségjel után macskakörmök között az értéket (a "|" karaktert a billentyűzeten AltGr+w gombbal lehet előcsalogatni).
Nézzünk egy példát!
Szeretnénk zöld háttérrel kiemelni a magyar, szürke háttérrel a német és világoskékkel pedig az angol nyelvi részeket!

...

...
<body>	
    

Nyelvijellemző-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok
</body>

Azt hiszem, hogy ezt most már csak túl magyarázhatnám, a példa beszédes.

Nyelvijellemző-kijelölő

linkelek ide
linkelek oda
Mégis itt maradok
ugrás a lap tetejére