انتخابگرهای خاصیت

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

استایل دهی عناصر HTML با خاصیت های مخصوص

استایل دهی عناصر HTML که خاصیت (attribute) یا مقدار خاصیت (attribute value) خاصی دارند امکان‌پذیر است.[۱]

انتخابگر [خاصیت] در CSS

انتخابگر [attribute] برای انتخاب عناصر با یک خاصیت مخصوص استفاده می‌شود.

مثال زیر تمامی عناصر <a> با خاصیت هدف (target) را انتخاب می‌کند:

مثال

a[target] {
  background-color: yellow;
}


انتخابگر خاصیت [attribute="value"] در CSS

انتخابگر [attribute="value"] برای انتخاب عنصری با خاصیت و مقدار (value) ویژه ای استفاده می‌شود.

مثال زیر تمامی عناصر <a> با خاصیت target که مقدار آن برابر با "_blank" است را انتخاب می‌کند: target="_blank"

مثال

a[target="_blank"] {
  background-color: yellow;
}


انتخابگر [attribute~="value"] در CSS

انتخابگر [attribute~="value"] برای انتخاب عناصری با یک مقدار خاصیت که شامل کلمه‌ای مخصوص می‌شود بکار می رود.

مثال زیر تمامی عناصر با خاصیت title که مقدار آن لیستی از کلمات است که با فاصله از هم جدا شده اند، و یکی آز آنها "flower" است را انتخاب می‌کند:

مثال

[title~="flower"] {
  border: 5px solid yellow;
}


مثال بالا تمامی عناصر با title="summer flower"، title="flower" و title="flower new" را تطبیق می‌دهد، اما موارد title="my-flower" یا title="flowers" را تطبیق نمی‌دهد.

انتخابگر [attribute|="value"] در CSS

انتخابگر [attribute|="value"] برای انتخاب عناصری استفاده می‌شود که خاصیت ویژه ای در آنها با مقدار مخصوصی آغاز می‌شود.

مثال زیر تمامی عناصر با خاصیت class که مقدار آن با عبارت "top" آغاز می‌شود را انتخاب می‌کند:

نکته: مقدار خاصیت می‌بایست کل کلمه را شامل شود، یا به صورت تنها، مانند class="top"، یا با استفاده از علامت خط تیره (-)، مانند class="top-text" از یکدیگر جدا شده باشند!

مثال

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


انتخابگر [attribute^="value"] در CSS

انتخابگر [attribute^="value"] برای انتخاب عناصری استفاده می‌شود که مقدار خاصیت آنها با مقدار مخصوصی آغاز می‌شود.

مثال زیر تمامی عناصر با خاصیت class که مقدار آن با “top” آغازمی شود را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال

[class^="top"] {
  background: yellow;
}


انتخابگر [attribute$="value"] در CSS

انتخابگر [attribute$="value"] برای انتخاب عناصری که مقدار خاصیت آنها با یک مقدار مخصوص پایان می‌پذیرد استفاده می‌شود.

مثال زیر تمامی عناصر با خاصیت Class که مقدار آنها با عبارت "test" پایان بپذیرد را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال

[class$="test"] {
  background: yellow;
}


انتخابگر [attribute*="value"] در CSS

انتخابگر [attribute*="value"] برای انتخاب عناصری که مقدار خاصیت آنها شامل یک مقدار مخصوص است استفاده می‌شود.

مثال زیر تمامی عناصری که مقدار خاصیت class آنها شامل عبارت "te" است را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال

[class*="te"] {
  background: yellow;
}


استایل دهی فرم ها

انتخابگرهای خاصیت برای استایل دهی فرم‌ها بدون استفاده از class یا ID بسیار کاربردی هستند:

مثال

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}


نکته: آموزش فرم‌های CSS را برای مثال‌های بیشتری در مورد نحوه استایل دهی فرم‌ها با CSS را ببینید.

خود را با تمرین‌ها امتحان کنید!

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

انتخابگر مثال توضیح مثال
[''attribute''] [target] تمامی عناصر با یک خاصیت به خصوص را انتخاب می‌کند
[''attribute''=''value''] [target=_blank] تمامی عناصر با خاصیت target="_blank" را انتخاب می‌کند.
[''attribute''~=''value''] [title~=flower] تمام عناصر با خاصیت title شامل کلمه "flower" را انتخاب می‌کند
[attribute|=value] [lang|=en] تمامی عناصری که خاصیت lang آنها با عبارت "en" آغاز شود را انتخاب می‌کند
[''attribute''^=''value''] a[href^="https"] هر عنصر <a> که مقدار ویژگی href آن با "https" آغاز شود را انتخاب می‌کند
[''attribute''$=''value''] a[href$=".pdf"] هر عنصر <a> که مقدار ویژگی href آن با ".pdf" پایان می‌پذیرد را انتخاب می‌کند
[''attribute''*=''value''] a[href*="wikicod"] هر عنصر <a> که مقدار ویژگی href آن شامل رشته "wikicod" می‌شود را انتخاب می‌کند


منابع آموزشی