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

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;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.