محددات سمات CSS
نمط عناصر HTML مع سمات محددة
من الممكن تصميم عناصر HTML التي لها سمات أو قيم سمات محددة.
محدد CSS [سمة]
يستخدم [attribute]المحدِّد لتحديد العناصر ذات السمة المحددة.
يحدد المثال التالي جميع العناصر <a> ذات السمة الهدف:
مثال
a[target] {
background-color: yellow;
}
محدد CSS [سمة = "القيمة"]
يستخدم [attribute="value"]المحدِّد لتحديد العناصر ذات السمة والقيمة المحددين.
يحدد المثال التالي جميع العناصر <a> ذات الهدف = "_ blank" السمة:
مثال
a[target="_blank"] {
background-color: yellow;
}
محدد CSS [سمة ~ = "القيمة"]
يستخدم [attribute~="value"]المحدِّد لتحديد العناصر ذات قيمة السمة التي تحتوي على كلمة محددة.
يحدد المثال التالي جميع العناصر التي تحتوي على سمة عنوان تحتوي على قائمة كلمات مفصولة بمسافات ، أحدها "زهرة":
مثال
[title~="flower"] {
border: 5px solid yellow;
}
سيطابق المثال أعلاه العناصر التي تحتوي على العنوان = "زهرة" ، والعنوان = "زهرة الصيف" ، والعنوان = "زهرة جديدة" ، ولكن ليس العنوان = "زهرة" أو العنوان = "زهور".
[سمة | = "قيمة"] CSS محدد
يستخدم [attribute|="value"]المحدِّد لتحديد العناصر ذات السمة المحددة ، والتي يمكن أن تكون قيمتها بالضبط القيمة المحددة ، أو القيمة المحددة متبوعة بشرطة (-).
ملاحظة: يجب أن تكون القيمة كلمة كاملة ، إما بمفردها ، مثل class = "top" ، أو متبوعة بواصلة (-) ، مثل class = "top-text".
مثال
[class|="top"] {
background: yellow;
}
محدد CSS [سمة ^ = "القيمة"]
يستخدم [attribute^="value"]المحدِّد لتحديد العناصر ذات السمة المحددة ، والتي تبدأ قيمتها بالقيمة المحددة.
يحدد المثال التالي جميع العناصر التي لها قيمة سمة فئة تبدأ بـ "أعلى":
ملاحظة: لا يجب أن تكون القيمة كلمة كاملة!
مثال
[class^="top"] {
background: yellow;
}
محدد CSS [السمة $ = "القيمة"]
يتم [attribute$="value"]استخدام المحدد لتحديد العناصر التي تنتهي قيمة السمة الخاصة بها بقيمة محددة.
يحدد المثال التالي جميع العناصر التي لها قيمة سمة للفئة تنتهي بـ "test":
ملاحظة: لا يجب أن تكون القيمة كلمة كاملة!
مثال
[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;
}
نصيحة: تفضل بزيارة البرنامج التعليمي لنماذج CSS للحصول على مزيد من الأمثلة حول كيفية تصميم النماذج باستخدام CSS.
جميع محددات سمات CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |