S největší pravděpodobností už víte, jak s pomocí CSS určité pravidlo týkající se formátu přiřadit kýženým prvkům na webové stránce. Buď uvedete název tagu, nebo se spolehnete na třídu, případně id.

#cerveny{
color: #FF0000;
}

<span id="cerveny" class="tucne">tento text bude červený</span>

Jako selektor ovšem může figurovat i atribut. Rozšiřme si proto ukázkový příklad a prakticky se podívejme, jak výběr konkrétního tagu funguje.

<span id="cerveny" class="tucny" rel="dulezite">tento text bude červený</span>

Nyní se na prvek odkážeme velmi jednoduše. Zapíšeme tag a v hranatých závorkách uvedeme atribut včetně jeho hodnoty.

span[rel="dulezite"]{
color: #FF0000;
}

Mezi tagem a následující otevírací hranatou závorkou neuvádějte mezeru.

Osobně se příležitostně potkávám se situací, kdy na načtené stránce potřebuji pozměnit nějaké prvky, typicky po dokončení ajaxové komunikace. Život mi poté usnadňují následující operátory, kterými lze nahradit rovnítko.

[rel*=dulezite]

Nyní to již začíná být zajímavé. Pokud hledáme řetězec kdekoliv v hodnotě atributu, použijeme *=.

<span id="cerveny" class="tucny" rel="pomerne-dulezite-sdeleni">tento text bude červený</span>

span[rel*="dulezite"]{
color: #FF0000;
}

[rel^=dulezite]

Pokud znáte základní syntaxi regulárních výrazů, možná už tušíte, s jakými vlastnostmi tento operátor přichází. Bude platný pro všechny hodnoty, které začínají uvedeným řetězcem.

<span rel="dulezite-sdeleni">tento text bude červený</span>

span[rel^="dulezite"]{
color: #FF0000;
}

[rel$=dulezite]

Ze shodného soudku pochází symbol dolaru následovaný rovnítkem. Opět zde máme souvislost s regulárními výrazy. Tentokrát jsou vybrány všechny atributy, jejichž hodnoty končí uvedeným řetězcem.

<span rel="toto-je-dulezite">tento text bude červený</span>

span[rel$="dulezite"]{
color: #FF0000;
}

[rel~=dulezite]

V CSS může jeden prvek náležet do více tříd a přitom se během používání selektorů nic nemění. V případě atributů tomu tak však není. Pokud se kýžená hodnota atributu nachází v seznamu odděleném mezerami, použijeme ~=.

<span rel="tajne dulezite nezapomenout">tento text bude červený</span>

span[rel~="dulezite"]{
color: #FF0000;
}

[rel|=dulezite]

Pokud se vám rozlišení jednotlivých hodnot pomocí mezer nelíbí, lze se spolehnout i na pomlčku (přesněji řečeno jde o spojovník, tedy symbol nacházející se přímo na klávesnici).

<span rel="tajne-dulezite-nezapomenout">tento text bude červený</span>

span[rel|="dulezite"]{
color: #FF0000;
}

Ještě se sluší poznamenat, že může následovat několik výběrů atributů za sebou.

<span title="zajimave" rel="tajne-dulezite-nezapomenout">tento text bude červený</span>

span[title="zajimave"][rel*="dulezite"]{
color: #FF0000;
}

Uvedené techniky podporují všechny moderní webové prohlížeče. S plnou podporou přichází i Internet Explorer 7, nulovou však nabízí Internet Explorer 6. Pokud si selektory v podobě atributů oblíbíte, může se vám hodit odkaz na projekt :select[ivizr], jenž slibuje, že přivede k životu řadu funkcí nastíněného rázu v prohlížečích, které jimi běžně nedisponují.