محددات الخصائص في CSS
حتى الآن كنت تجد العنصر باسم الوسم وclass وid وعلاقات الشجرة. أحياناً HTML نفسه يقول الحقيقة مسبقاً: هذا الرابط فيه target، وهذا الحقل type="email"، والعنوان يبدأ بـ https. محدّد الخاصية يقرأ تلك الحقيقة — دون أن تصنع class جديداً لكل حالة.
ما هو محدّد الخاصية؟
محدّد الخاصية يجد عناصر لها خاصية HTML معيّنة. يمكنك فحص «الوجود» فقط، أو قياس القيمة بدقة أو جزئياً. اسم الخاصية يأتي داخل أقواس مربعة: [attr].
خمسة أنماط يومية
بهذه الأنماط تغطي تقريباً كل عمل محدّدات الخصائص المعتاد.
📊 معاملات محدّد الخاصية
| النمط | المعنى البسيط | مثال |
|---|---|---|
[attr] |
هذه الخاصية موجودة (أي قيمة) | a[target] |
[attr="value"] |
القيمة هي هذه بالضبط | input[type="email"] |
[attr^="value"] |
القيمة تبدأ بهذا النص | a[href^="https"] |
[attr$="value"] |
القيمة تنتهي بهذا النص | a[href$=".pdf"] |
[attr*="value"] |
هذا النص يظهر في مكان ما داخل القيمة | a[href*="docs"] |
الوجود فقط — [attr]
حين تضع الاسم وحده داخل الأقواس، تعني: «فليكن لديه هذه الخاصية.» قيمتها لا تهم — أي قيمة تكفي.
وجود — روابط تفتح تبويباً جديداً
cssa[target] {
font-weight: 600;
}متى يفيد؟
أعلام اختيارية في HTML: رابط بـ target، أو عنصر يحمل data-state — حتى قبل أن تفلتر قيمته.
القيمة الدقيقة — [attr="value"]
علامة = تقول: يجب أن تكون القيمة حرفاً بحرف كما هي. ضع القيمة عادةً بين علامتي اقتباس؛ أوضح وآمن أكثر.
قيمة دقيقة — حقل البريد
cssinput[type="email"] {
border: 1px solid #0f766e;
}هل نصنع class أم نستخدم type؟
إذا كان HTML يحمل مسبقاً type="email"، اكتبه في المحدّد. class جديد (مثل .email-field) يلزم حين تريد نفس المظهر على شيء بلا تلك الخاصية أيضاً.
بداية القيمة — ^=
^= تعني أن قيمة الخاصية تبدأ بهذا النص. مفيد جداً للعناوين الآمنة أو البادئة المشتركة.
يبدأ بـ — روابط https
cssa[href^="https"] {
color: #0f766e;
}نهاية القيمة — $=
$= تعني أن القيمة تنتهي بهذا النص. ممتاز لامتداد الملف في href أو src.
ينتهي بـ — رابط PDF
cssa[href$=".pdf"] {
font-style: italic;
}في مكان ما داخل القيمة — *=
*= تقول: يظهر هذا النص في أي موضع من القيمة. قوي، لكنه يتوسع بسرعة. إن عرفت البداية أو النهاية، فـ ^= أو $= أنظف عادةً.
يحتوي — مسار docs في العنوان
cssa[href*="docs"] {
text-decoration: underline;
}عادات جيدة
- ضع قيمة المحدّد بين علامتي اقتباس:
type="email" - إن كانت الصفحة مزدحمة، أضف اسم الوسم أيضاً:
input[type="search"]أوضح من[type="search"]وحده - اكتب الإملاء وحالة الأحرف كما في HTML
- لا تستبدل كل class بخاصية؛ اذهب إلى الخاصية حين يحمل الوسم نفسه تلك الحقيقة
جرّب بنفسك
- اصنع ثلاثة روابط: واحد
https://…، وواحد ينتهي بـ.pdf، وواحد فيهdocsفي المسار؛ إضافة إلى<input type="email">و<input type="text">. - ضع
a[href^="https"] { color: #0f766e; }— يتغير لون الرابط الآمن فقط. a[href$=".pdf"] { font-style: italic; }— يصبح رابط PDF مائلاً.input[type="email"] { border-color: #0f766e; }— يأخذ حقل البريد فقط إطاراً.- اختياري: جرّب
a[href*="docs"]؛ قد يلتقط روابط أكثر من بادئة/لاحقة صارمة.
أخطاء شائعة
[type=email]بلا اقتباس حين الاقتباس أوضح وآمن أكثر*=بدل^=— «يحتوي» يلتقط الوسط أيضاً فتضيء روابط زائدة- استخدام
[class]بدل.nameللمظهر العادي - نسيان أن
=يريد القيمة كاملة —type="text"ليسtype="textbox" - خلط أسماء الخصائص —
hreflangغيرhref
ملخص
- محدّد الخاصية يعمل بـ
[ ]على خصائص HTML - الاسم وحده = وجود؛
== قيمة دقيقة ^=بداية،$=نهاية،*=في أي مكان داخل القيمة- اختر أضيق معامل ما زال يعبّر عن قصدك
- عند الحاجة ألصق اسم الوسم بالمحدّد أيضاً
- تمرّن على
hrefوtypeالحقيقيين ثم حدّث الصفحة
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى