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

استایل‌گذاری عناصر HTML با ویژگی خاص

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

انتخاب‌گر [attribute] CSS

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

در مثال زیر، تمام عناصر <a> با ویژگی target انتخاب می‌شوند؛

مثال

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

به طور مستقیم امتحان کنید

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

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

در مثال زیر، تمام عناصر <a> با ویژگی target="_blank" انتخاب می‌شوند:

مثال

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

به طور مستقیم امتحان کنید

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

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

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

مثال

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

به طور مستقیم امتحان کنید

مثال بالا با عناصر زیر مطابقت دارد: title="flower"، title="summer 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;
}

به طور مستقیم امتحان کنید

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

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

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

نکته:مقدار نیازی به کلمه کامل ندارد!

مثال

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

به طور مستقیم امتحان کنید

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

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

در مثال زیر، عناصر class با پایان "test" انتخاب می‌شوند:

نکته:مقدار نیازی به کلمه کامل ندارد!

مثال

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

به طور مستقیم امتحان کنید

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

[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] انتخاب همه عناصر که دارای ویژگی 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*="codew3c"] هر عنصر <a> که ارزش ویژگی href شامل زیرشاخه "codew3c" باشد انتخاب شود.

خواندن بیشتر

کتاب خارجی:شرح انتخاب‌گرهای ویژگی CSS