در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد انتخابگر ویژگی (attribute-selector) صحبت خواهیم کرد.
در مقالات قبلی اشاره کردیم که هر عنصر HTML می تواند یک یا چند Attribute یا ویژگی داشته باشد. هر ویژگی با یک نام و یک مقدار مشخص می شود. به عنوان مثال عنصر زیر دارای ویژگی کلاس و مقدار test می باشد.
<div class=”test”></div>
و یا به عنوان یک مثال دیگر تگ html را مشاهده می کنید که ویژگی lang برای آن نوشته شده است:
<html lang="fa"></html>
در CSS امکان انتخاب عناصر از طریق این ویژگی ها وجود دارد. در ساده ترین حالت می توانیم بصورت زیر نام ویژگی را درون براکت قرار دهیم تا هر عنصری که دارای چنین ویژگی هست را هدف قرار دهیم:
[class] {
color: red;
}
به این ترتیب هر عنصری که در صفحه ویژگی class را داشته باشد رنگ متن قرمز به عنوان استایل آن اعمال می شود.
حال اگر بخواهیم فقط عناصری که کلاس test دارند را با این روش انتخاب کنیم می توانیم به این صورت عمل کنیم:
[class="test"] {
color: red;
}
و در نهایت اگر بخواهیم فقط div هایی که این کلاس را دارند انتخاب کنیم, می نویسیم:
div[class="test"] {
color: red;
}
توجه کنید که در اینجا فقط برای یادگیری این مثال زده شد و بهتر است از انتخابگر کلاس که همان استفاده از . است استفاده کنیم. دلیل این موضوع نیز برمی گردد به رفتار مرورگرها و سرعت آنها در پیدا کردن انتخابگرها.
انتخابگر کلاس از انتخابگر ویژگی سرعت اجرایی بالاتری دارد یعنی مرورگر برای انتخاب عناصر از طریق ویژگی ها باید زحمت بیشتری را متحمل شود. اما انتخابگر ویژگی در خیلی از موارد می تواند مفید باشد، به عنوان مثال می خواهیم تمام input هایی که از نوع password هستند را انتخاب کنیم:
input[type="password"] { border: 1px solid red; }
هر نوع ویژگی که بخواهید را می توانید از طریق این انتخابگر،انتخاب کنید،به عنوان نمونه می توانید با استفاده از این ویژگی تمام لینک هایی که مقدار ویژگی target آنها _blank است را انتخاب کنید:
a[target="_blank"] { text-decoration: underline; }
نکته : ارجحیت انتخابگر ویژگی با انتخابگر کلاس برابر است.
استفاده از این نوع انتخابگر به همینجا ختم نمی شود. این امکان وجود دارد که بتوانیم با توجه به قسمتی از مقدار یک ویژگی عنصر, آن عنصر را انتخاب کنیم. مثلا تمام عناصری که ویژگی کلاس آنها شامل کلمه container می باشد, یا لینک هایی که آدرس آنها به com ختم می شوند.
شروع با…
فرض کنید عناصر HTML بصورت زیر باشند: (به آدرس های لینک ها توجه کنید(
<article>
<p>
<a href="http://pzof.ir">شرکت پیشگامان صفر و یک فرساد</a>
<a href="internal.html">صفحه داخلی</a>
</p>
</article>
حال فرض کنید بخواهیم فقط لینک هایی که آدرس های آنها خارج از سایت خودمان هست را انتخاب کنیم؟ به بیان ساده تر آنهایی که با http:// شروع می شوند را انتخاب کنیم.
برای این منظور می توانیم از ^ در انتخابگر ویژگی (attribute selector) استفاده کنیم.
a { color: blue; }
به این ترتیب در اینجا ما عناصر a ای که ویژگی href آنها با مقدار http:// شروع می شود را انتخاب کردیم بدون آنکه نیازی باشد از ویژگی هایی مانند class , id استفاده کنیم.
اتمام با…
حال فرض کنید می خواهیم لینک هایی که در سایتمان به فایل های pdf اشاره می کنند را با استایلی متمایز نمایش دهیم. از آنجا که اطمینان داریم تمام این لینک ها با .pdf ختم می شوند کافی است تا از $ بصورت زیر استفاده کنیم:
a[href$=".pdf"] {
}
شامل…
اگر عناصر img را بصورت زیر داشته باشیم:
<img src="images/img1.jpg" alt="" >
<img src="images/img2_thumbnail.png" alt="" >
<img src="images/img3_thumbnail-test.png" alt="" >
<img src="images/img4_thumbnail.jpg" alt="" >
حال اگر بخواهیم از بین عکس های بالا،مواردی را انتخاب کنیم که کلمه thumbnail در ویژگی src انها آمده است می توانیم به این صورت عمل کنیم:
img[src*="thumbnail"] {
}
چندین مقدار
یک ویژگی می تواند چندین مقدار داشته باشد به عنوان مثال ممکن ما عنصری داشته باشیم که دارای چندین کلاس می باشد.
<p class="message info"></p>
برای اینکه بخواهیم بواسطه یکی از این کلاس ها این عنصر را انتخاب کنیم می توانیم بنویسیم:
p[class~="message"] {
}
توجه داشته باشید که که می توان انتخابگرهای ویژگی را با هم ترکیب کرد به عنوان مثال می توانیم بنوسیم:
img[src*="large"][alt~="bird"] {
}
همانطور که مشاهده می کنید می توانیم به آسانی با استفاده از تکه ای از مقدار ویژگی عناصر به عنوان قلاب برای گرفتن عناصر استفاده کنیم. آن تکه می تواند اول مقدار ویژگی, آخر آن و چه در هر کجای آن باشد.
امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش CSS با ما همراه باشید.
کامنت جدید ...