سی ای ایس اپنہار نمبر انتخاب گر

ویژگی خاص رکھنے والے HTML عناصر کی نمائش کا انداز تعین کریں

آپ می‌توانند ویژگی خاص یا ویژگی کی قیمتی رکھنے والے HTML عناصر کی نمائش کا انداز تعین کریں。

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

[attribute] انتخاب‌کننده برای انتخاب عناصر باطن حامل ویژگی خاص می‌باشد.

مثال کے مطابق، یہ تمام <a> عناصر کو انتخاب کرتا ہے جو target ویژگی رکھتے ہیں؛

مثال

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

جربها بنفسك

CSS [attribute="value"] انتخاب‌کننده

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

مثال کے مطابق، یہ تمام <a> عناصر کو انتخاب کرتا ہے جو target="_blank" ویژگی رکھتے ہیں:

مثال

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

جربها بنفسك

CSS [attribute~="value"] انتخاب‌کننده

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

مثال کے مطابق، یہ عناصر کو title ویژگی میں "flower" کلمے شامل ہونے پر انتخاب کرتا ہے:

مثال

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

جربها بنفسك

مثال بالا، عناصر زیر کا مطابقت کرے گا: title="flower"، title="summer flower" اور title="flower new"، لیکن مطابقت نہیں کرے گا: title="my-flower" یا title="flowers"۔

CSS [attribute|="value"] انتخاب‌کننده

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

في المثال التالي، يتم اختيار جميع العناصر التي تحتوي على خاصية 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> التي تبدأ بـ "https" في قيمة الخاصية href.
[attribute$=value] a[href$=".pdf"] اختر كل عناصر <a> التي تنتهي بـ ".pdf" في قيمة الخاصية href.
[attribute*=value] a[href*="codew3c"] href کی اپنے طور پر شامل "codew3c" کا نیٹ ورک پیج کا ہر <a> آئٹم انتخاب کریں

توسعہ خواندنی

课外书:CSS انتخاب گر کا تفصیل