Viena no CSS īpašībām ir spēja atšķirt HTML elementus balstoties uz viena no elementa atribūtiem. Apskatiet šo HTML kodu:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Šim elementam ir trīs atribūti - id, class un rel. Lai izvēlētos šo elementu iekš CSS, jūs varat izmantot ID atdalītāju (#first-title) vai klases atdalītāju (.magical). Bet vai jūs zinājāt, ka varat izvēlēties šo elementu arī pēc rel atribūta un tā vērtības? To sauc par CSS atribūtu atdalītāju:

h2[rel=friend] {
    /* woohoo! */
 }

Tas vēl nav viss saistībā ar atribūtu atdalītājiem, tāpēc apskatīsimies tuvāk dažādas iespējas, un mēģināsim aptvert dažus "reālās pasaules" scenārijus, kuri varētu noderēt.

Atribūtam ir konkrēta vērtība

Piemērā augstāk h2 elementa atribūta vērtība bija "friend". CSS atdalītājs norādīja uz šo h2 elementu, jo šī elementa atribūta rel vērtība bija tieši "friend". Citiem vārdiem sakot, vienādības zīme nozīmē tieši to, ko jūs domājat, ka tā nozīmē... tiešu sakritību. Apskatīsimies citu vienkāršu piemēru:

<h1 rel="external">Atribūts ir vienāds</h1>

h1[rel=external] { color: red }

Lielisks šāds reālās pasaules piemērs ir blogu ruļļa (blogroll)stilu izveidošana. Pieņemsim, ka jums ir šāds draugu saišu saraksts:

<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

Un jūs velaties katrai saitei izvēlēties citu stilu. Tradicionāli jūs visdrīzāk piešķirtu katrai saitei savu klases nosaukumu, uz kuru norādīt, taču tas pieprasa papildus kodu, no kā vienmēr ir labāk izvairīties (semantika u.t.t.). Cits variants varētu būt :nth-child izmantošana, taču tas nozīmē, ka saišu kārtība nedrīkst mainīties. Šis ir perfekts piemērs atribūtu atdalītāju izmantošanai... saitēm jau ir unikāls atribūts, uz kuru var norādīt!

a[href=http://perishablepress.com] { color: red }

Es ticu, ka visbiežāk atribūtu atdalītājus var izmantot uz input elementiem. Tie ir ar tipiem - text, button, checkbox, file, hidden, image, password, radio, reset un submit (es kādu izlaidu?). Tie visi ir <input> elementi, taču tie ir ļoti atšķirīgi. Tāpēc darīt līdzīgi, kā, piemēram, input { padding: 10px } parasti nav laba doma. Daudz labāk ir darīt šādi:

input[type=text] { padding: 3px }
input[type=radio] { float: left }

Šis tiešām ir vienīgais veids atšķirt dažādus input elementu tipus nesačakarējot pārējos un iztiekot bez lieka papildus HTML koda.

Atribūta vērtība kaut kur satur noteiktu vērtību

Te sāk palikt interesantāk. Vienādības zīmei atribūtu atdalītājos priekšā var pievienot citas zīmes, kas var mainīt mazliet jēgu. Piemēram, "*=" nozīmē, ka "norādītā vērtība atrodas jebkur elementa atribūta vērtībā". Apskatieties šo piemēru:

<h1 rel="xxxexternalxxx">Atribūts satur</h1>

h1[rel*=external] { color: red }

Neaizmirstiet, ka elementa klases un ID arī ir atribūti, kas var tikt izmantoti kopā ar atribūtu atdalītājiem. Pieņemsim, jūs veidojat CSS stilu mājaslapai, kurai jūs nevarat mainīt HTML kodu, un neveiklajam kodētājam ir trīs div elementi, uz kuriem nepieciešams norādīt:

<div id="post_1"></div>
<div id="post_two"</div>
<div id="third_post"></div>

Jūs varat tos visus izvēlēties šādi:

div[id*=post]  { color: red }

Atribūta vērtība sākas ar noteiktu vērtību

<h1 rel="external-link yep">Atribūts sākas</h1>

h1[rel^=external] { color: red }

Reālas izmantošanas piemērs varētu būt, ja jūs vēlaties lai visas saites, kas ved uz jūsu drauga mājaslapu, būtu atšķirīgas no visām citām saitēm, neatkarīgi no tā, uz kuru lapu drauga mājaslapā tiek saitēts:

a[href^=http://perishablepress.com] { color: red }

Šādi tiks norādīts ne tikai uz sākumlapu, bet arī uz visām mājaslapas apakšsadaļām.

Atribūta vērtība beidzas ar noteiktu vērtību

Mēs varam izvēlēties pēc tā, ar ko sākas atribūta vērtība, kāpēc arī ne ar to, ar ko tā beidzas?

<h1 rel="friend external">Atribūts beidzas</h1>

h1[rel$=external] { color: red }

Ja godīgi, tad šim ir grūti piemeklēt kādu praktisku piemēru, taču ir patīkami apzināties, ka tāda iespēja pastāv. Varbūt var mēģināt izveidot atsevišķu stilu saitēm, kuras beidzas ar simboliem, kuri neko nemaina:

a[href$=#], a[href$=?] { color: red }

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar atstarpēm

Jūs taču jau zināt, ka elementam var būt vairākas klases, vai ne? Ja jūs to izmantojat, tad varat izvēlēties jebkuru klasi savā CSS ar .klases-nosaukums. Ar atribūtu sadalītājiem ir sarežģītāk. Ja jūsu rel atribūtam ir vairākas vērtības (t.i. vērtību saraksts atdalīts ar atstarpēm), jums jāizmanto "~=".

<h1 rel="friend external sandwich">Atribūti atdalīti ar atstarpi</h1>

h1[rel~=external] { color: red }

Jūs varbūt jautājat, kāpēc izmantot "~=", ja "*=" ir daudz plašāks? Jā, "*=" ir plašāks, taču tas var būt pārāk plašs. "~=" pieprasa atstarpes ap elementu, kamēr "*=" - nē. Piemēram, ja ir divi elementi, viens ar rel="home friend-link" un otrs ar rel="home friend link", tad, lai korekti izvēlētos tieši otro pēc "friend" vērtības, ir jāizmanto "~=".

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar "|"

Šis atdalītājs strādā līdzīgi, kā iepriekšējais atdalītājs, vienīgi atribūta vērtības tiek atdalītas ar "|", atstarpes vietā.

<h1 rel="friend-external-sandwich">Atribūti atdalīti ar |</h1>

h1[rel|=external] { color: red }

Vairāku atribūtu vērtību sakritība

Svarīgi atzīmēt, ka varat izmantot vairākus atribūtu atdalītājus vienā atdalītājā, kas pieprasa, ka tie visi sakristu, lai sakristu pats atdalītājs.

<h1 rel="handsome" title="Important note">Vairāki atribūti</h1>

h1[rel=handsome][title^=Important] { color: red }

Pārlūku atbalsts

Visi šeit aprakstītie piemēri darbojas visos populārākajos mūsdienu pārlūkos: Safari, Chrome, FireFox, Opera un IE. Internet Explorer perfekti atbalsta atribūtu atdalītājus sākot ar 7. versiju, kamēr 6. versija neatbalsta vispār. Lai pārbaudītu sava pārlūka atbalstu, izmantojiet šo testa lapu. Ja rinda/atdalītājs ir sarkanā krāsā, tātad atdalītājs tiek atbalstīts.

(Raksta oriģināls angļu valodā pieejams te: The Skinny on CSS Attribute Selectors by Chris Coyier.)