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

« صفحهٔ قبل

صفحهٔ بعد »

استایل دهی عناصر 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" می‌شود را انتخاب می‌کند

« صفحهٔ قبل

صفحهٔ بعد »