تفصیل انتخاب‌گرهای ویژگی CSS

CSS 2 انتخاب‌کننده ویژگی را معرفی کرده است.

انتخاب‌کننده ویژگی می‌تواند بر اساس ویژگی و مقدار آن عنصرها را انتخاب کند.

انتخاب‌کننده ویژگی ساده

اگر می‌خواهید عنصرهایی با ویژگی خاصی انتخاب کنید، بدون توجه به مقدار آن ویژگی، می‌توانید از انتخاب‌کننده ویژگی ساده استفاده کنید.

مثال 1

اگر می‌خواهید همه عناصر شامل عنوان (title) به رنگ قرمز شوند، می‌توانید به این صورت بنویسید:

*[title] {color:red;}

آزمایش کنید

مثال 2

مانند بالا، می‌توان تنها به عنصرهای با ویژگی href (عنصرهای a) استایل اعمال کرد:

a[href] {color:red;}

آزمایش کنید

مثال 3

می‌توان بر اساس چندین ویژگی انتخاب کرد، تنها کافی است انتخاب‌کننده ویژگی‌ها را به هم متصل کنید.

مثلاً، برای اینکه متن لینک‌های HTML که هم ویژگی href و هم ویژگی title دارند، قرمز شوند، می‌توانید به این صورت بنویسید:

a[href][title] {color:red;}

آزمایش کنید

مثال 4

می‌توان از این ویژگی به روش‌های خلاقانه‌ای استفاده کرد.

مثلاً، می‌توان به همه‌ی تصاویر دارای ویژگی alt استایل داد تا تصاویر معتبر برجسته شوند:

img[alt] {border: 5px solid red;}

آزمایش کنید

توجه:این مورد بهتر است برای تشخیص و نه طراحی استفاده شود، یعنی برای تعیین اینکه آیا تصویر واقعاً معتبر است یا خیر.

مثال 5: استفاده از انتخاب‌کننده‌های ویژگی برای مستندات XML

انتخاب‌کننده‌های ویژگی در مستندات XML بسیار مفید هستند، زیرا زبان XML بر نام‌گذاری عناصر و ویژگی‌ها بر اساس کاربرد آن‌ها تأکید دارد.

فرض کنید یک مستند XML برای توصیف سیارات منظومه شمسی طراحی کرده‌ایم. اگر بخواهیم تمام عناصر planet دارای ویژگی moons را قرمز کنیم، تا به سیارات دارای ماه توجه بیشتری شود، می‌توانید به این صورت بنویسید:

planet[moons] {color:red;}

این باعث می‌شود که متن دومین و سومین عناصر در برچسب زیر قرمز شود، اما متن اولین عنصر قرمز نیست:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

نتیجه را مشاهده کنید

انتخاب بر اساس مقدار ویژگی

علاوه بر انتخاب عناصر دارای ویژگی‌های خاص، می‌توانید محدوده‌ی انتخاب را کوچکتر کنید و تنها عناصر دارای ویژگی‌های خاصی را انتخاب کنید.

مثال 1

مثلاً، فرض کنید می‌خواهید لینک‌هایی که به یک مستند خاص در سرور وب اشاره دارند، قرمز شوند، می‌توانید به این صورت بنویسید:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

آزمایش کنید

مثال 2

مانند انتخاب‌کننده‌های ساده‌ی ویژگی، می‌توان چندین انتخاب‌کننده‌ی ویژگی-مقدار را به هم متصل کرد تا یک مستند را انتخاب کنید.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

این کد اولین لینک اضافی را در برچسب‌های زیر به قرمز درمی‌آورد، اما لینک‌های دوم و سوم تأثیری ندارند:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

آزمایش کنید

مثال 3

به طور مشابه، زبان XML نیز می‌تواند از این روش برای تنظیم استایل استفاده کند.

در اینجا به مثال مربوط به سیارات بازمی‌گردیم. فرض کنید که می‌خواهید تنها عناصر planet با ارزش moons برابر با 1 را انتخاب کنید:

planet[moons="1"] {color: red;}

این کد باعث می‌شود که تنها عنصر دوم در این نشانه‌گذاری به رنگ قرمز درآید، اما عنصر اول و سوم تحت تأثیر قرار نمی‌گیرند:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

نتیجه را مشاهده کنید

ویژگی و ارزش ویژگی باید کاملاً تطابق داشته باشند

لطفاً توجه داشته باشید که این فرمت نیاز به تطابق کامل با ارزش ویژگی دارد.

اگر ارزش ویژگی شامل لیستی از مقادیر جدا شده با فضاست، ممکن است تطابق مشکل شود.

در نظر بگیرید که این بخش از نشانه‌گذاری را در نظر بگیرید:

<p class="important warning">این پاراگراف یک هشدار بسیار مهم است.</p>

اگر به این صورت بنویسید p[class="important"]، این قوانین نمی‌تواند با نمونه‌های نشان‌داده تطابق یابد.

برای انتخاب عنصری بر اساس ویژگی خاص، باید به این صورت بنویسید:

p[class="important warning"] {color: red;}

آزمایش کنید

انتخاب بر اساس انتخاب‌کننده خاص بخشی از ویژگی

اگر نیاز به انتخاب بر اساس یک کلمه خاص از لیست کلمات موجود در ویژگی دارید، باید از خط تیره افقی (~) استفاده کنید.

فرض کنید می‌خواهید عناصری که class ویژگی آن‌ها شامل word است را انتخاب کنید، می‌توانید با استفاده از این انتخاب‌کننده این کار را انجام دهید:

p[class~="important"] {color: red;}

آزمایش کنید

اگر خط تیره افقی فراموش شود، این به معنای نیاز به تطابق کامل است.

تفاوت بین انتخاب‌کننده خاص بخشی از ویژگی و روش نام‌گذاری با نقطه

این انتخاب‌کننده معادل روش نام‌گذاری با نقطه که در انتخاب‌کننده‌های کلاسی بحث شده است، است.

یعنی p.important و p[class="important"] هنگام اعمال به مستند HTML معادل هستند.

پس چرا باید انتخاب‌کننده خاص "~=" وجود داشته باشد؟ زیرا می‌تواند برای هر ویژگی استفاده شود، نه تنها برای class.

مثلاً می‌توان یک مستند شامل تعداد زیادی تصویر داشت که تنها بخشی از آن‌ها عکس هستند. برای این منظور می‌توان از یک انتخاب‌کننده خاص بر اساس ویژگی‌های title مستند استفاده کرد تا تنها این تصاویر انتخاب شوند:

img[title~="تصویر"] {border: 1px solid gray;}

این قوانین برای انتخاب همه تصاویری که متن title شامل "Figure" است مناسب هستند. تصاویری که ویژگی title ندارند یا متن title شامل "Figure" نیستند، با این قوانین تطبیق نمی‌یابند.

آزمایش کنید

انتخابگرهای تطبیق بخش مقادیر

در اینجا یک مودل انتخابگر پیشرفته‌تر را معرفی می‌کنیم که پس از تکمیل CSS2 منتشر شده است و شامل بخش‌های بیشتری از انتخابگرهای بخش مقادیر است. بر اساس تعریف استاندارد، باید به آن "انتخابگرهای تطبیق بخش مقادیر" گفته شود.

بسیاری از مرورگرهای مدرن از این انتخابگرها پشتیبانی می‌کنند، از جمله IE7.

در جدول زیر، یک جمع‌بندی ساده از این انتخابگرها آورده شده است:

نوع توضیح
[abc^="def"] انتخاب همه عناصر با مقادیر ویژگی abc که با "def" شروع می‌شود
[abc$="def"] انتخاب همه عناصر با مقادیر ویژگی abc که با "def" پایان می‌یابد
[abc*="def"] انتخاب همه عناصر با مقادیر ویژگی abc که شامل زیرشاخه "def" است

می‌توان فکر کرد که این انتخابگرها کاربردهای زیادی دارند.

برای مثال، اگر می‌خواهید به همه لینک‌هایی که به CodeW3C.com اشاره دارند، استایل بدهید، نیازی نیست که برای همه این لینک‌ها class مشخص کنید و سپس برای این کلاس استایل بنویسید، بلکه فقط باید این قانون را بنویسید:

a[href*="codew3c.com"] {color: red;}

آزمایش کنید

توجه:هر ویژگی می‌تواند با این انتخابگرها استفاده شود.

نوع انتخابگر ویژگی خاص

در نهایت، انتخابگرهای ویژگی خاصی را معرفی می‌کنیم. بیایید به مثال زیر نگاه کنیم:

*[lang|="en"] {color: red;}

این قوانین برای انتخاب همه عناصر با ویژگی lang برابر با en یا با شروع با en- مناسب هستند. بنابراین، سه عناصر اول از این نمونه‌های برچسب انتخاب می‌شوند و دو عناصر بعدی انتخاب نمی‌شوند:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

آزمایش کنید

به طور کلی، [att|="val"] می‌تواند برای هر ویژگی و مقادیر آن استفاده شود.

فرض کنید یک مستند HTML شامل مجموعه‌ای از تصاویر است که نام فایل هر یک از این تصاویر به این صورت است: figure-1.jpg و figure-2.jpgبا این حال، می‌توانید از انتخابگرهای زیر برای تطبیق همه این تصاویر استفاده کنید:

img[src|="figure"] {border: 1px solid gray;}

آزمایش کنید

البته، استفادۀ بیشترین از انتخابگرهای ویژگی برای تطبیق مقادیر زبان است.

دستورالعمل مرجع انتخاب‌گرهای CSS

انتخاب‌گر توضیح
[attribute] برای انتخاب عناصر با ویژگی مشخص شده استفاده می‌شود.
[attribute=value] برای انتخاب عناصر با ویژگی و ارزش مشخص شده استفاده می‌شود.
[attribute~=value] برای انتخاب عناصر با ارزش ویژگی که شامل کلمه مشخص شده می‌شود استفاده می‌شود.
[attribute|=value] برای انتخاب عناصر با ارزش ویژگی که با مقدار مشخص شده شروع می‌شود و باید یک کلمه کامل باشد استفاده می‌شود.
[attribute^=value] همه عناصر که ارزش ویژگی با مقدار مشخص شده شروع می‌شود را تطبیق می‌دهند.
[attribute$=value] همه عناصر که ارزش ویژگی با مقدار مشخص شده پایان می‌یابد را تطبیق می‌دهند.
[attribute*=value] همه عناصر که ارزش ویژگی شامل مقدار مشخص شده هستند را تطبیق می‌دهند.