٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش انتخاب کنندگان ویژگی های CSS

عناصر HTML را با ویژگی های خاص سبک کنید می توان عناصر HTML را که دارای صفات خاص یا مقادیر ویژگی هستند سبک کرد. انتخابگر [ویژگی] CSS [attribute]انتخاب استفاده می شود برای انتخاب عناصر با ویژگی مشخص شده است. مثال…

محمد یوسفی

12 جولای 2021

عناصر HTML را با ویژگی های خاص سبک کنید

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


انتخابگر [ویژگی] CSS

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

مثال زیر همه عناصر <a> با ویژگی هدف را انتخاب می کند:

مثال

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

CSS [مشخصه = “مقدار”] انتخابگر

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

مثال زیر همه عناصر <a> را با ویژگی target = “_ blank” انتخاب می کند:

مثال

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

CSS [مشخصه ~ = “مقدار”] انتخابگر

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

مثال زیر همه عناصر دارای ویژگی عنوان را انتخاب می کند که شامل یک لیست از کلمات جدا شده از فضا است که یکی از آنها “گل” است:

مثال

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

مثال فوق عناصر را با عنوان = “گل” ، عنوان = “گل تابستان” و عنوان = “گل جدید” مطابقت می دهد ، اما با عنوان = “گل من” یا عنوان = “گل” مطابقت ندارد.


CSS [مشخصه | = “مقدار”] انتخابگر

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

مثال زیر همه عناصر دارای مقدار ویژگی کلاس را انتخاب می کند که با “top” شروع می شود:

توجه: مقدار باید کل کل باشد ، یا به تنهایی ، مانند class = “top” ، یا به دنبال آن یک خط (-) ، مانند class = “top-text”!

مثال

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

CSS [ویژگی ^ = “مقدار”] انتخابگر

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

مثال زیر همه عناصر دارای مقدار ویژگی کلاس را انتخاب می کند که با “top” شروع می شود:

توجه: لازم نیست مقدار کل کل باشد!

مثال

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

CSS [مشخصه $ = “value”] انتخاب کننده

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

مثال زیر همه عناصر دارای مقدار ویژگی کلاس را انتخاب می کند که با “تست” پایان می یابد:

توجه: لازم نیست مقدار کل کل باشد!

مثال

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

CSS [مشخصه * = “مقدار”] انتخابگر

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

مثال زیر همه عناصر دارای مقدار ویژگی کلاس را که حاوی “te” است انتخاب می کند:

توجه: لازم نیست مقدار کل کل باشد!

مثال

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

فرم های یک ظاهر طراحی شده

انتخابگرهای ویژگی می توانند برای فرم دهی بدون کلاس یا شناسه مفید باشند:

مثال

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

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

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها