در ادامه سلسله مقالات آموزش 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 با ما همراه باشید.
کامنت جدید ...