انتخابگرهای مبتنی بر صفت در CSS

مقدمه

در این درس، گروه دیگری از انتخابگرهای CSS را بررسی می‌کنیم که انتخابگرهای صفت یا به بیان دقیق‌تر، انتخابگرهای مبتنی بر صفت (attribute-based selectors) نامیده می‌شوند. علت این نامگذاری این است که این انتخابگرها عناصر را بر اساس صفت‌ها انتخاب می‌کنند. در حقیقت، این گروه از انتخابگرها، کار انتخاب را بر مبنای استفاده یا عدم استفاده‌ی عناصر از یک صفت مشخص و یا مقداری که یک صفت دریافت کرده، انجام می‌دهند.

انواع انتخابگرهای صفت

چند نوع انتخابگر مبتنی بر صفت وجود دارد که هر یک معنای مشخصی داشته و برای سناریوی مشخصی کاربرد دارند. الگوی کلی هر یک از این انتخابگرها به همراه یک مثال و توضیح مختصر در جدول زیر آورده شده و در ادامه، این انتخابگرها را یکی‌یکی بررسی می‌کنیم.

نام انتخابگر	الگوی انتخابگر	توضیح
attribute	[attr]	عناصری را که دارای صفتی به نام attr هستند، انتخاب می‌کند.
attribute value	[attr=value]	عناصری را انتخاب می‌کند که مقدار صفت attr برای آنها دقیقاً برابر با value باشد.
delimited value	[attr~=value]	عناصری را انتخاب می‌کند که مقدار صفت attr برای آنها یا دقیقاً برابر با value است یا برابر با یک لیست از مقادیر space separated (یعنی مقادیری که با کاراکتر فاصله از هم جدا شده‌اند) است که مقدار value نیز بین آنها قرار دارد.
started value	[attr\|=value]	عناصری را انتخاب می‌کند که مقدار صفت attr برای آنها یا دقیقاً برابر با value است و یا با value شروع شده و بلافاصله بعد از آن، یک کاراکتر خط فاصله (hyphen) قرار دارد.
value substring	[attr*=value]	عناصری را انتخاب می‌کند که دارای صفتی به نام attr بوده و مقدار این صفت، عبارتی شامل value باشد.
value start	[attr^=value]	عناصری را انتخاب می‌کند که دارای یک صفت با نام attr بوده و مقدار این صفت با value شروع می‌شود.
value end	[attr$=value]	عناصری را انتخاب می‌کند که دارای یک صفت با نام attr بوده و مقدار این صفت با value به پایان می‌رسد.

انتخابگرهای جدول بالا را می‌توان در دو گروه قرار داد. گروه اول، presence and value نام دارد و متشکل از چهار انتخابگر اول جدول بالاست که کار انتخاب عناصر را بر اساس وجود یک صفت یا مقدار یک صفت انجام می‌دهند. گروه دوم، substring matching نام دارد و متشکل از سه انتخابگر پایانی جدول بالاست که کار انتخاب عناصر را بر اساس وجود یک عبارت در مقدار یک صفت مشخص، انجام می‌دهند. اجازه دهید هر یک از انتخابگرهای جدول بالا را به صورت جداگانه و با جزئیات بیشتر بررسی کنیم.

انتخابگر Attribute

اولین انتخابگر جدول بالا، انتخابگر attribute نام دارد و برای انتخاب عناصری که از یک صفت مشخص استفاده کرده‌اند (بدون توجه به مقدار این صفت)، کاربرد دارد. همانطور که در جدول بالا دیده می‌شود، برای به‌کارگیری این نوع انتخابگرها، باید نام صفت مورد نظر را درون یک جفت کروشه (angle bracket) قرار دهیم. به عنوان مثال، برای انتخاب پاراگراف‌هایی که صفت title را تنظیم کرده‌اند، از یک انتخابگر attribute به صورت زیر استفاده می‌کنیم:

CSS

p[title] {
  color: blue;
}

انتخابگر Attribute Value

دومین انتخابگر جدول بالا، انتخابگر attribute value نام دارد که کار انتخاب عناصر را براساس مقدار صفت‌ها انجام می‌دهد. به عبارت دیگر، از این نوع انتخابگرها برای انتخاب عنصر یا عناصری که مقدار مشخصی را به یک صفت اختصاص داده‌اند، استفاده می‌شود. الگوی کلی این نوع انتخابگرها که در جدول بالا نیز آورده شده، به این صورت است که صفت و مقدار مورد نظر را درون یک جفت کروشه قرار داده و یک کاراکتر تساوی (=) بین آنها قرار می‌دهیم. برای مثال، اگر بخواهیم ترتیبی دهیم که عناصر p موجود در صفحه که مقدار demo را به صفت title اختصاص داده‌اند، انتخاب شوند، از یک انتخابگر attribute value به فرم زیر استفاده می‌کنیم:

CSS

p[title="demo"] {
  color: blue;
}

انتخابگر Delimited Value

سومین انتخابگر جدول بالا، انتخابگر delimited value نام دارد و باعث انتخاب عناصری می‌شود که یک صفت مورد نظر آنها شامل مقدار مشخصی باشد؛ یعنی عناصری انتخاب می‌شوند که مقدار مورد نظر را به همراه صفر، یک یا چند مقدار دیگر که با فاصله از هم جدا شده‌اند، به صفت مشخصی اختصاص داده باشند. برای ایجاد یک انتخابگر از این نوع، باید قبل از کاراکتر تساوی، یک کاراکتر tilde (‍‍~) قرار دهیم. مثال زیر را ببینید:

CSS

li[class] {
  font-size: 200%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}

نکته‌ی مهمی که در مورد این نوع انتخابگرها باید مورد توجه قرار دهیم، حساسیت آن به بزرگی یا کوچکی حروف است. اگر در مثال بالا از انتخابگر delimited value به صورت li[class~=A] استفاده کنیم، هیچ‌یک از عناصر li انتخاب نخواهند شد.

انتخابگر Started Value

چهارمین انتخابگر جدول بالا، انتخابگر started value نام دارد و عناصری را انتخاب می‌کند که مقدار یک صفت مشخص برای آنها یا دقیقاً برابر با مقدار مورد نظر است یا با آن مقدار شروع شده و بلافاصله بعد از آن کاراکتر خط فاصله (hyphen) آورده شده است. برای ایجاد یک انتخابگر از این نوع، باید قبل از کاراکتر تساوی، یک کاراکتر pipe (|) قرار دهیم. مثال زیر را ببینید:

CSS

[class|=top]{
  background: yellow;
}

انتخابگر Value Substring

پنجمین انتخابگر جدول بالا، انتخابگر value substring نام دارد و برای انتخاب عناصری کاربرد دارد که به یک صفت مفروض، مقداری را اختصاص داده باشند که مقدار مورد نظر به صورت یک زیررشته (substring) از آن باشد. به عبارت دیگر، با استفاده از این نوع انتخابگر، می‌توانیم ترتیبی بدهیم که هر عنصری در صفحه که شامل مقدار مشخص‌شده باشد، انتخاب شود. برای ایجاد یک انتخابگر از این جنس، باید یک کاراکتر ستاره (asterisk) را قبل از کاراکتر تساوی قرار دهیم. مثال زیر را ببینید:

CSS

div[class*="test"]{
  background: #ff0000;
}

دقت داشته باشید که تفاوت این انتخابگرها با انتخابگرهای delimited value این است که در اینجا لزومی ندارد که مقدار مورد نظر، یک مقدار مجزا باشد که با یک کاراکتر فاصله از سایر مقادیر جدا شده باشد؛ بلکه کافیست این مقدار به صورت زیررشته در مقدار صفت مورد نظر وجود داشته باشد.

انتخابگر Value Start

ششمین انتخابگر جدول بالا، انتخابگر value start نام دارد و همانطور که از نامش نیز پیداست، برای انتخاب عناصری که مقدار اعطایی آنها به یک صفت مشخص با عبارت مورد نظر شروع می‌شود، کاربرد دارد. برای ایجاد یک انتخابگر از این دست، باید قبل از کاراکتر تساوی از یک کاراکتر hat (^) استفاده کنیم. مثال زیر را ببینید:

CSS

div[class^="test"]{
  background: #ffff00;
}

انتخابگر Value End

انتخابگر value end برای انتخاب عناصری که مقدار اعطایی به یک صفت مشخص از آنها، با رشته یا عبارت مورد نظر به پایان می‌رسد، کاربرد دارد. این نوع از انتخابگرها با قرار دادن یک کاراکتر dollar ($) قبل از کاراکتر تساوی ایجاد می‌شوند. مثال زیر را ببینید:

CSS

div[class$="test"]{
  background: #ffff00;
}

حساسیت انتخابگرهای صفت به بزرگی و کوچکی حروف

امکان بی‌اثر کردن کوچکی یا بزرگی حروف در انتخابگرهای صفت وجود دارد. در حالت پیش‌فرض، وقتی از انتخابگری به فرم li[class=”a”] استفاده می‌کنیم، تنها عناصری انتخاب می‌شوند که مقدار صفت class آنها برابر با a است و چنانچه عنصری دارای مقدار A برای صفت class خود باشد، انتخاب نخواهد شد. اما می‌توانیم با افزودن یک حرف i قبل از براکت بسته از مرورگر بخواهیم که هر عنصری را که دارای کلاس a یا A است، انتخاب کند و برای انتخاب عناصر به بزرگی یا کوچکی حروف حساس نباشد. مثال زیر را ببینید:

CSS

li[class^="a"]{
  background-color: yellow;
}

li[class^="a" i]{
  color: red;
}