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}

var ai_iframe_width_advanced_iframe = 0;var ai_iframe_height_advanced_iframe = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe = document.getElementById("advanced_iframe");var hiddenTabsDoneadvanced_iframe = false; function resizeCallbackadvanced_iframe() {}

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}

var ai_iframe_width_advanced_iframe_2 = 0;var ai_iframe_height_advanced_iframe_2 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_2); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_2 = document.getElementById("advanced_iframe_2");var hiddenTabsDoneadvanced_iframe_2 = false; function resizeCallbackadvanced_iframe_2() {}

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;}

var ai_iframe_width_advanced_iframe_3 = 0;var ai_iframe_height_advanced_iframe_3 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_3); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_3 = document.getElementById("advanced_iframe_3");var hiddenTabsDoneadvanced_iframe_3 = false; function resizeCallbackadvanced_iframe_3() {}

var ai_iframe_width_advanced_iframe_4 = 0;var ai_iframe_height_advanced_iframe_4 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_4); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_4 = document.getElementById("advanced_iframe_4");var hiddenTabsDoneadvanced_iframe_4 = false; function resizeCallbackadvanced_iframe_4() {}

var ai_iframe_width_advanced_iframe_5 = 0;var ai_iframe_height_advanced_iframe_5 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_5); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_5 = document.getElementById("advanced_iframe_5");var hiddenTabsDoneadvanced_iframe_5 = false; function resizeCallbackadvanced_iframe_5() {}

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}

var ai_iframe_width_advanced_iframe_6 = 0;var ai_iframe_height_advanced_iframe_6 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_6); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_6 = document.getElementById("advanced_iframe_6");var hiddenTabsDoneadvanced_iframe_6 = false; function resizeCallbackadvanced_iframe_6() {}

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}

var ai_iframe_width_advanced_iframe_7 = 0;var ai_iframe_height_advanced_iframe_7 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_7); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_7 = document.getElementById("advanced_iframe_7");var hiddenTabsDoneadvanced_iframe_7 = false; function resizeCallbackadvanced_iframe_7() {}

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}

var ai_iframe_width_advanced_iframe_8 = 0;var ai_iframe_height_advanced_iframe_8 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_8); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_8 = document.getElementById("advanced_iframe_8");var hiddenTabsDoneadvanced_iframe_8 = false; function resizeCallbackadvanced_iframe_8() {}

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;}

var ai_iframe_width_advanced_iframe_9 = 0;var ai_iframe_height_advanced_iframe_9 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_9); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_9 = document.getElementById("advanced_iframe_9");var hiddenTabsDoneadvanced_iframe_9 = false; function resizeCallbackadvanced_iframe_9() {}

É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;}

var ai_iframe_width_advanced_iframe_10 = 0;var ai_iframe_height_advanced_iframe_10 = 0;var aiIsIe8=false;var aiOnloadScrollTop="true";var aiShowDebug=false; if (typeof aiReadyCallbacks === 'undefined') { var aiReadyCallbacks = []; } else if (!(aiReadyCallbacks instanceof Array)) { var aiReadyCallbacks = []; } function aiShowIframeId(id_iframe) { jQuery("#"+id_iframe).css("visibility", "visible"); } function aiResizeIframeHeight(height) { aiResizeIframeHeight(height,advanced_iframe_10); } function aiResizeIframeHeightId(height,width,id) {aiResizeIframeHeightById(id,height);}var ifrm_advanced_iframe_10 = document.getElementById("advanced_iframe_10");var hiddenTabsDoneadvanced_iframe_10 = false; function resizeCallbackadvanced_iframe_10() {}

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