A selector az a szabványos “nyelv”, amivel az xml (és a html) kódokban egyszerű szöveges utasítással el tudunk érni egy adott elemet. Az egyszerű selector-okat lehet kombinálni, ezzel összetett selector-okat létrehozva, amivel még pontosabban lehet a kívánt elemet megcélozni. Fontos megjegyezni, hogy egy adott elemet több különböző selector-al is el lehet érni, és általánosságban érdemes a lehető legegyszerűbb megoldásra törekedni.
Ezeket a standard selector-okat használja az ArticleSuggestion is az adott elemek felismeréséhez, a tartalom <body> részében keresve.
az adott típusú elemre a nevével lehet hivatkozni
például a <body> elemet a következő selector-al lehet elérni:
az adott elem class attribútumára a “.” selector-al lehet hivatkozni.
például a <div class=”class1 class2”> elemet a következő selector-okkal lehet elérni:
figyelni kell, hogy a class többször is felhasználható a kódban, így ez nem határozza meg egyértelműen az adott elemet.
az adott elem id attribútumára a “#” selector-al lehet hivatkozni.
például a <div id=”firstdiv”> elemet a következő selector-al lehet elérni:
az id értékének a kódban egyedinek kell lennie, így elméletben az id attribútum egyértelműen meghatározza az adott elemet, gyakorlatilag a webfejlesztők nem mindig tartják be ezt a szabályt.
ha csak azt akarjuk meghatározni, hogy az adott elemnek rendelkeznie kell egy adott attribútummal, akkor a “[]” selector-t kell alkalmazni.
például a <div role=”mobile”> elemet a következő selector-al lehet elérni:
ez a megadási mód nem foglalkozik azzal, hogy pontosan milyen érték van megadva, csak azzal, hogy egyáltalán létezik-e az adott attribútum.
ha egy adott attribútum értékére vagyunk kíváncsiak, akkor is a “[]” selector-t kell alkalmazni, de azt ki lehet egészíteni a keresett értékkel. Ebben az esetben minden olyan elem automatikusan kiesik, aminél nemis létezik az adott attribútum
teljes egyezés
ezzel a megadással a teljes értéket vizsgáljuk
részszöveg valahol az értékben
ezzel a megadással az értékben egy adott részt keresünk
részszöveg az érték elején
ezzel a megadással az érték elejét vizsgáljuk
részszöveg az érték végén
ezzel a megadással az érték végét vizsgáljuk
space-el elválasztott listában adott elem keresése
ezzel a megadással az olyan értékekben keresünk egy adott elemet, amiben space-el elválasztva vannak felsorolva az elemek
például: <div data-x=”val1 val2 val3”>
ha egy adott selector több elemet is megtalál, akkor abból ki lehet egy adottat választani.
első elem
utolsó elem
adott elem
a selectorokat a végtelenségig lehet kombinálni, akár egyszerű, akár összetett selector-ról van szó.
ugyanannak az elemnek több feltétel megadás
egyszerűen minden elválasztás nélkül egymás után kell írni az összes selector-t
adott elem adott leszármazottjának keresése
az adott elemre jellemző egyszerű vagy összetett selector után space-el elválasztva kell írni a leszármazott selector-át
adott elem közvetlen gyerekének keresése
mint a leszármazott, de a két selector közé be kell rakni a “>” karaktert. Ez cak akkor fogja visszaadni a gyereket, ha az valóban közvetlenül a szülő gyereke és a kettő közt nincs a hierrarchiában más elem.
adott elemet közvetlenül követő első testvér elem keresése
mint a leszármazott, de a két selector közé be kell rakni a “+” karaktert.
azt az egy elemet fogja visszaadni, ami közvetlenül az első elem után van, ugyanazon a hierrarchia szinten.
adott elemet közvetlenül követő összes testvér elem keresése
mint az első testvér, de a “+” karakter helyett a “” karaktert kell rakni.
az összes olyan elemet vissza fogja adni, ami közvetlenül az első elem után van, ugyanazon a hierrarchia szinten.