CSS atribūtu atdalītāji

01.03.2010. 22:21:20 sagatavoja Deniss Fedotovs (deni2s)

Kopš populārākās mājaslapas 2010.gadā pārstāj atbalstīt Internet Explorer 6 pārlūku, ir vērts paskatīties uz CSS iespējām, kuras neatbalstīja IE6, bet atbalsta jaunāki pārlūki.

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

Atribūtam ir noteikta 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

Atribūts satur kaut kur 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

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

Atribūts 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

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 "|"

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

Š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

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.)


21 komentārs Komentēšana pieejama visiem.
Namejs komentēja 11.10.2010. 10:29:45 (ip:91.135.80.11)
Komentāra reitings: 0

Paldies par informāciju, tik arī ne visi pārlūki šo atbalsta. :)

XRumerTest (yourmail@gmail.com) komentēja 19.05.2021. 00:31:58 (ip:46.105.123.122)
Komentāra reitings: 0

Hello. And Bye.

JailbaitCpPthc (fgagrr@gmail.co) komentēja 27.05.2021. 04:48:20 (ip:193.218.118.231)
Komentāra reitings: 0

Content from TOR websites Magic Kingdom, TLZ,
Childs Play, Baby Heart, Giftbox, Hoarders Hell.

h**p://cutt.us/NNa8o
h**p://bit.ly/3uKbrPG

OPVA, Pedo Playground, GirlsHUB, Lolita City
More 3000 videos and 20000 photos girls and boys.

h**p://lmy.de/e2UWG
h**p://soo.gd/0Oci

The new and exclusive material and complete series
Full Siberian Mouse, Bibigon, Syrup, Buratino packs

h**p://gg.gg/ul2i9
h**p://v.ht/eEgt

newvids (ghsht@gmail.com) komentēja 12.06.2021. 11:44:24 (ip:185.220.101.205)
Komentāra reitings: 0

Huge archive!!! A heap of video for all tastes!
We do not hesitate, we download, and that can and be late.
0612
>>> cutt.us/SuZug
>>> bit.ly/3uNdKRM
>>> gg.gg/ul2b5
>>> lmy.de/Ee9a9
>>> v.ht/rpEqn
>>> soo.gd/Zrsie

jailb komentēja 12.06.2021. 11:45:58 (ip:185.220.101.205)
Komentāra reitings: 0

The best of selection , For you like Big files and Collections 2020 + new 2021

>>> cutt.us/HyebK
>>> bit.ly/3ill9EO
>>> lmy.de/w28Pc
>>> soo.gd/dVfe
>>> gg.gg/uvgmw
>>> v.ht/U17Kv

VDO PTHC & PTSC
ART VDO PTSC
Picture PTHC & PTSC
And Orther More

ロリキッズポルノ__C/P_Lo/li/ta

vids komentēja 12.06.2021. 11:46:49 (ip:185.220.101.205)
Komentāra reitings: 0

The mega collection of a huge amount of videos.
Manage, download, look and enjoy!

>>> cutt.us/dClEx
>>> soo.gd/gLBz
>>> v.ht/fGgS
>>> gg.gg/uvgdt
>>> bit.ly/3fUvSUW
>>> lmy.de/kZvCs

JailbaitCpPthc (ghfhrt@gmail.com) komentēja 27.06.2021. 12:46:52 (ip:185.220.100.241)
Komentāra reitings: 0

Content from TOR websites Magic Kingdom, TLZ,
Childs Play, Baby Heart, Giftbox, Hoarders Hell.

h**p://cutt.us/yqjxS
h**p://bit.ly/35ucjNb

OPVA, Pedo Playground, GirlsHUB, Lolita City
More 3000 videos and 20000 photos girls and boys.

h**p://lmy.de/e2UWG
h**p://soo.gd/3oV2K

The new and exclusive material and complete series
Full Siberian Mouse, Bibigon, Syrup, Buratino packs

h**p://gg.gg/v163f
h**p://v.ht/KFi6

newvids (gfghfhrt@gmail.com) komentēja 27.06.2021. 12:48:12 (ip:185.220.100.241)
Komentāra reitings: 0

Huge archive!!! A heap of video for all tastes!
We do not hesitate, we download, and that can and be late.
0627
>>> cutt.us/66dMc
>>> bit.ly/2TE6MRJ
>>> gg.gg/v1963
>>> lmy.de/Ee9a9
>>> v.ht/EKYkW
>>> soo.gd/cd9V

Ellen (ellencooch@gmx.net) komentēja 27.06.2021. 15:26:36 (ip:205.185.214.235)
Komentāra reitings: 0

Hookup Females Uses Totally free Issues? An Incredible Side to side Gain!

Free of charge hookup girls dating apps on the internet is the solution if you're fed up with likely to cafes and organizations merely to be ignored, as well as a whole lot worse, laughed at.
I understand what it's like because I've been there.

I used to be one and needy back into the working day -- I needed a new companion -- having said
that i continued striving because I had not one other option. If you're a single person who wants to hookup with
sexy ladies without likely to those locations where women are by itself, then this post might just make positive changes to life.
It will describe why internet dating on the
web is the perfect alternative if you're a male who seems to be too
shy to strategy a beautiful female in a nightclub or membership.

newvids (vjgtyjt@gmail.com) komentēja 15.07.2021. 12:40:47 (ip:185.220.101.193)
Komentāra reitings: 0

Huge archive!!! A heap of video for all tastes!
We do not hesitate, we download, and that can and be late.
0715
>>> cutt.us/66dMc
>>> bit.ly/2TE6MRJ
>>> gg.gg/v1963
>>> lmy.de/Ee9a9
>>> v.ht/EKYkW
>>> soo.gd/cd9V

JailbaitPthcCp komentēja 29.07.2021. 22:29:14 (ip:176.10.99.200)
Komentāra reitings: 0

ULTIMATE CP РТНС COLLECTION
NO PAY, PREMIUM or PAYLINK
DOWNLOAD ALL СР FOR FREE

LS-Lovely Nymphets, Amusing Kids

LS-Pretty Animals (30s 3032photo)

LS-Touch It (40 sets 3945 photos)

LS-Video Angels,Lols Only (66vid)

LS-Natural Angels,HotLols (67vid)

YoungVideoModels: Larisa,Kristina

Marina,Nadia,Vera, Alija part 1-7

Three girls and boy (Mpc37) Full

Girl 6yo and man, Sleep 9yo girl

LS-Video 2000 All(183v),LS-Show

YoungVideoModels: Nadia, Nastia

Kristina,Oxana,Valentina,Roxana

Color Climax child collect (61vid)

Family Game (Marga),Elly & Tina
------
or --> cutt.us/0M3ng
or --> bit.ly/3wuBQky
or --> lmy.de/w28Pc
or --> soo.gd/raZj
or --> gg.gg/vbomd
or --> v.ht/1AcH

vids komentēja 29.07.2021. 22:29:55 (ip:176.10.99.200)
Komentāra reitings: 0

The mega collection of a huge amount of videos.
Manage, download, look and enjoy!
no password:
updated: 29.07.2021
>>> cutt.us/SDlrN
>>> soo.gd/PCPi
>>> v.ht/PNPgo
>>> gg.gg/vbnxe
>>> bit.ly/3fUvSUW
>>> lmy.de/kZvCs

Kellee (kelleebeauvais@bigstring.com) komentēja 29.07.2021. 22:48:33 (ip:89.249.73.211)
Komentāra reitings: 0

Hookup Girls Makes use of Free Matters? A Fantastic
Horizontal Benefit!

Free hookup females hookup apps on the internet is the best solution if you're fed up with going to cafes and organizations only to be prevented, or perhaps a
whole lot worse, laughed at. I understand what it's like because
I've been there. I had been individual and desperate back
in the working day -- I required a fresh lover -- nevertheless i continued striving because I needed
no other option. If you're an individual man who wants to hookup with alluring women without gonna those locations
the location where the girls are alone, than the post might just
improve your lifestyle. It can explain why internet dating on-line is
the best option if you're a masculine that is too shy
to strategy a lovely female within a club or membership.

Vern (vernburrows@gmx.de) komentēja 11.08.2021. 11:55:31 (ip:173.255.191.23)
Komentāra reitings: 0

Hookup Women Utilizes Cost-free Matters? A Great Horizontal Benefit!


Free of charge hookup females wiki hookups on the internet
is the best solution if you're tired of gonna bars and clubs only to be prevented, or perhaps even worse, laughed at.
I realize what it's like because I've been there. I was one and eager during the
time -- I necessary a brand new spouse -- having said that i kept on seeking because I had not any other choice.
If you're just one man who wants to hookup with
hot girls without going to those areas in which the
females are on your own, then this report may just make
positive changes to existence. It can describe why dating on-line is the ideal alternative if you're a masculine that is too shy
to method a lovely female inside a nightclub or membership.

JailbaitCpPthc (fghsdh@gmail.com) komentēja 21.08.2021. 08:34:49 (ip:199.249.230.114)
Komentāra reitings: 0

Content from TOR websites Magic Kingdom, TLZ,
Childs Play, Baby Heart, Giftbox, Hoarders Hell.

h**p://cutt.us/0M3ng
h**p://bit.ly/3wuBQky

OPVA, Pedo Playground, GirlsHUB, Lolita City
More 3000 videos and 20000 photos girls and boys.

h**p://lmy.de/w28Pc
h**p://soo.gd/raZj

The new and exclusive material and complete series
Full Siberian Mouse, Bibigon, Syrup, Buratino packs

h**p://gg.gg/vbomd
h**p://v.ht/1AcH

newvids (fdfghsdh@gmail.com) komentēja 21.08.2021. 08:36:29 (ip:199.249.230.114)
Komentāra reitings: 0

Huge archive!!! A heap of video for all tastes!
We do not hesitate, we download, and that can and be late.
0821
>>> cutt.us/66dMc
>>> bit.ly/2TE6MRJ
>>> gg.gg/v1963
>>> lmy.de/Ee9a9
>>> v.ht/EKYkW
>>> soo.gd/cd9V

Jeremiah (jeremiahfarthing@aol.com) komentēja 24.08.2021. 08:39:12 (ip:185.229.243.5)
Komentāra reitings: 0

New Email List of LinkBio Users. Sell your products or services directly with
cold email marketing to Instagram users that uses LinkBio in their profiles Download it
from lead generation companies ads">">">">

newvids komentēja 29.08.2021. 21:35:13 (ip:83.97.20.189)
Komentāra reitings: 0

Huge archive!!! A heap of video for all tastes!
We do not hesitate, we download, and that can and be late.
0829
>>> cutt.us/fxwqM
>>> bit.ly/3sGd8NU
>>> gg.gg/vrjhl
>>> lmy.de/tUj7o
>>> v.ht/liN9
>>> soo.gd/15FrY

Deneen (deneenlopez@gmail.com) komentēja 30.08.2021. 22:16:18 (ip:185.229.243.5)
Komentāra reitings: 0

New Email List of LinkBio Users. Sell your products or services directly with cold email marketing to Instagram users that uses LinkBio in their profiles Download it from affiliate marketing
make up">">">">

jailb (fdghsh@gmail.com) komentēja 12.09.2021. 13:47:18 (ip:185.220.100.240)
Komentāra reitings: 0

ULTIMATE CP РТНС COLLECTION
NO PAY, PREMIUM or PAYLINK
DOWNLOAD ALL СР FOR FREE

LS-Lovely Nymphets, Amusing Kids

LS-Pretty Animals (30s 3032photo)

LS-Touch It (40 sets 3945 photos)

LS-Video Angels,Lols Only (66vid)

LS-Natural Angels,HotLols (67vid)

YoungVideoModels: Larisa,Kristina

Marina,Nadia,Vera, Alija part 1-7

Three girls and boy (Mpc37) Full

Girl 6yo and man, Sleep 9yo girl

LS-Video 2000 All(183v),LS-Show

YoungVideoModels: Nadia, Nastia

Kristina,Oxana,Valentina,Roxana

Color Climax child collect (61vid)

Family Game (Marga),Elly & Tina
------
or --> cutt.us/FSgJ4
or --> bit.ly/3y8xKPC
or --> lmy.de/w28Pc
or --> soo.gd/ITWn
or --> gg.gg/vvwd8
or --> v.ht/PZF1

vids (ghjdj@gmail.com) komentēja 12.09.2021. 13:53:10 (ip:185.220.100.240)
Komentāra reitings: 0

The mega collection of a huge amount of videos.
Manage, download, look and enjoy!
updated: 12.09.2021
>>> cutt.us/E8P1Z
>>> soo.gd/i5KV
>>> v.ht/7kUZt
>>> gg.gg/vvvrg
>>> bit.ly/3BwkhTU
>>> lmy.de/kZvCs

Komentāra pievienošana

Ar * atzīmētie lauciņi ir jāaizpilda obligāti.





[ uz rakstu sarakstu ]

Reklāma
Par web.hc.lv

web.hc.lv ir vortāls, kurā tiek aplūkoti mājaslapu veidošanas un mārketinga aspekti, no idejas līdz gandarījumam.

[Valid RSS] Valid XHTML 1.0! Valid CSS!

RSS 2.0 ziņu barotne (news feed)  Twitter

reģistrēties