محددات الخصائص CSS

تعيين النمط للعناصر HTML التي تحتوي على خاصية معينة

يمكننا تعيين النمط للعناصر HTML التي تحتوي على خاصية معينة أو قيمة خاصية معينة.

محدد [attribute] CSS

[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"] اختيار للعثور على العناصر التي تحتوي على خاصية معينة تبدأ بقيمة معينة。

في المثال التالي، يتم اختيار جميع العناصر التي تحتوي على خاصية 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"] اختر كل عنصر <a> الذي يحتوي على سلسلة "codew3c" في الخاصية href.

قراءة متعمقة

كتب خارجية:تفسير محدديات الخصائص CSS