News & Blog

CSS attribútum kijelölők

News & Blog

A CSS segítségével a HTML oldalunkon tetszőleges elemek jelölhetők ki típusok, azonosítójuk, az oldalon elfoglalt helyük alapján. Mivel ezeknek az elemeknek attribútumaik is lehetnek, joggal merül fel a kérdés, hogy lehet-e ezek alapján is kijelölnünk őket. A válasz természetesen az, hogy igen, erre szolgálnak az attribútum kijelölők.

Mire is használjuk ezeket az attribútumokat? Mindenféle adatokat tudunk velük a HTML-el tag-ekben eltárolni. Ezek némelyike létfontosságú a tag szempontjából (például egy <img> tag-ben a kép forrása, vagy egy <a> hivatkozásban a link, amire a hivatkozás mutat), mások például a HTML oldal mögött működő javascript programunk számára tárolnak adatokat. Az attribútum kijelölőkkel ezen attribútumok neve vagy tartalma alapján tudjuk az egyes elemeket kiválasztani. Az első példánkban az attribútum neve alapján történik a kiválasztás. Minden olyan kép ki lesz jelölve, amely rendelkezik alt attribútummal:

<img src="alma.jpg" alt="alma">
<img src="eper.jpg">    

img[alt]{border:5px green solid}

Az attribútum kijelölőket szögletes szárójelbe tesszük. A második példában már az attribútum tartalmán is múlik a kijelölés. Minden olyan képet kijelölünk, amelyben az alt attribútum tartalma az alma.

<img src="alma.jpg" alt="alma">
<img src="eper.jpg" alt="eper">    

img[alt="alma"]{border:5px green solid}

Arra is van lehetőségünk, hogy az attribútum tartalmára illeszkedő karaktersorozat az attribútum elejére vagy végére illeszkedjen, illetve bárhol a belsejére. Ilyenkor az = operátort egészítjük ki a ^, $ vagy * karakterekkel. Tegyük fel, hogy az oldalunkon van egy hivatkozás gyűjteményünk, amelyben különböző feltételeknek megfelelő hivatkozásokat szeretnénk kijelölni. A következő példákban először azokra a hivatkozásokra illeszkedik a kijelölő, melyek https protokollt használnak (ilyenkor az attribútum elején keresünk), a másodikban amelyek .hu domain-ra hivatkoznak (ilyenkor az attribútum végén keresünk, feltéve ha az attribútum csak domain nevet tartalmaz), illetve a harmadikban, melyek tartalmazzák a www.iktblog.hu karaktersorozatot (ilyenkor a karaktersorozat belsejében keresünk):

<a href="https://www.index.hu">https://www.index.hu</a><br/>
<a href="http://www.iktblog.hu/cikk1.html">http://www.iktblog.hu/cikk1.html</a><br/>
<a href="https://www.google.com">https://www.google.com</a>

a[href^="https"]{color: red;}
a[href$=".hu"]{color: red;}
a[href*="www.iktblog.hu"]{color: red;}

Alapértelmezetten az illesztés figyelembe veszi a kis/nagybetű különbségeket (bár ez attribútum függő). Amennyiben ezt nem szeretnénk előírni, akkor használjuk az i karakter a kijelölőben.  Az alábbi példában így a piros karaktersorozat illeszkedik a kis- és a nagy-betűvel írt színre is. 

<img src="alma.jpg" alt="piros alma">
<img src="eper.jpg" alt="Piros eper">    

img[alt*="piros" i]{border:5px green solid}

Ha egész szóra szeretnénk előírni az illeszkedést, egészítsük ki az = operátort a ~ karakterrel. Így a piros szóra illeszkedik, de az élénkpiros-ra már nem. Ezt a kijelölőt nagyon jól lehet használni minden olyan esetben, ha egy attribútumban szóközökkel elválasztva tárolunk információkat. Ilyenek lehetnek bizonyos kucsszavak, amelyek leírják az adott elem funkcióit, vagy akár a class attribútum, amelyik az elemre alkalmazott CSS osztályokat tartalmazza felsorolva szóközzel elválasztva. 

<img src="alma.jpg" alt="piros alma">
<img src="eper.jpg" alt="élénkpiros eper">    

img[alt~="piros"]{border:5px green solid}

Amennyiben azt szeretnénk, hogy a kijelölőben megadott szó egyedül vagy egy kötőjellel elválasztva elől szerepeljen az attribútumban, akkor a | karakterrel kell kiegészíteni az = operátort. A példánkban a piros karaktersorozat így illeszkedik a piros vagy a piros-színű alt attribútumra, de a piros_színű vagy a halványpiros-ra már nem, de az alma-piros-ra sem! (Vagyis kötőjeles formában is elől kell állnia.) 

<img src="alma.jpg" alt="piros-sárga-zöld">
<img src="eper.jpg" alt="sárga-piros-zöld">    

img[alt|="piros"]{border:5px green solid}

Természetesen az attribútum kijelölők esetén is van lehetőség arra, hogy több kijelölőt egyszerre (ÉS kapcsolatban) használjunk. Az alábbi hivatkozások közül azok lesznek kijelölve, melyek a www.iktblog.hu domain alatt egy pdf kiterjesztésű állományra hivatkoznak:

<a href="http://www.iktblog.hu/cikk1.html">http://www.iktblog.hu/cikk1.html</a><br/>
<a href="http://www.iktblog.hu/cikk2.pdf">http://www.iktblog.hu/cikk2.pdf</a><br/>
<a href="https://www.google.com">https://www.google.com</a>

a[href*="//www.iktblog.hu/"][href$=".pdf"]{color: red;}

És természetesen a :not() operátor itt is használható. A következő példában a www.iktblog.hu domain alatt az olyan hivatkozásokra illeszkedik, amelyek nem pdf állományra mutatnak:

<a href="http://www.iktblog.hu/cikk1.html">http://www.iktblog.hu/cikk1.html</a><br/>
<a href="http://www.iktblog.hu/cikk2.pdf">http://www.iktblog.hu/cikk2.pdf</a><br/>
<a href="https://www.google.com">https://www.google.com</a>

a[href*="//www.iktblog.hu/"]:not([href$=".pdf"]){color: red;}

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük