ما درجة أولوية مُحدِّدات المعرّف (ID Selectors) ؟
نظريتُعد مُحدِّدات المُعرِّفات (ID selectors) من أقوى المُحدِّدات في لغة CSS، إذ تتيح للمطورين تطبيق الأنماط (styles) على عناصر محددة ذات مُعرِّفات فريدة (unique identifiers).
وهذا يجعلها فعالة للغاية في استهداف العناصر الفردية التي تتطلب تنسيقاً فريداً (unique styling).
يتم تحديد مُحدِّدات المُعرِّف (ID selectors) باستخدام رمز المربع (#) متبوعاً باسم المُعرِّف (ID name). ويجب أن تكون هذه المُعرِّفات فريدةً داخل مستند HTML، مما يعني أنه لا يجوز أن يتشارك عنصران في المُعرِّف (ID) نفسه.
إليك مثال يستخدم مُحدِّد المُعرِّف (ID selector) :
index.html
<link rel="stylesheet" href="styles.css">
<p id="unique">فقرة نموذجية</p>
<p>فقرة أخرى</p>
<p>فقرة أخرى أخرى</p>
styles.css
#unique {
color: purple;
}
معاينة:
فقرة نموذجية
فقرة أخرى
فقرة أخرى أخرى
في هذا المثال، سيتم تعيين لون النص للعنصر الذي يحمل المعرّف unique إلى اللون الأرجواني purple.
تتمتع محددات المعرّف (ID selectors) بمستوى تحديد عالٍ جداً؛ فهو أعلى من مستوى تحديد محددات النوع (Type selectors) ومحددات الفئة (Class selectors)، ولكنه أقل من مستوى تحديد الأنماط المضمنة (inline styles). وتبلغ قيمة مستوى التحديد لمحدد المعرّف (0, 1, 0, 0).
هذا يعني أن محددات المعرفات (ID selectors) يمكنها تجاوز محددات الفئة (Class selectors) ومحددات النوع (Type selectors)، ولكن يمكن تجاوزها بواسطة الأنماط المضمنة (inline styles).
أسئلة :
ما هي قيمة التحديد (specificity) الخاصة بمُحدِّد المُعرِّف (ID selector) (على سبيل المثال: #example)؟
1. (1, 0, 0, 0) ❌
2. (0, 1, 0, 0) ✅
3. (0, 0, 1, 0) ❌
4. (0, 0, 0, 1) ❌
أي مما يلي يتمتع بخصوصية (specificity) أعلى من مُحدِّد المعرِّف (ID selector)؟
1. مُحدِّد الفئة (Class selector). ❌
2. نمط مُضمَّن (Inline style). ✅
3. مُحدِّد السمة (Attribute selector). ❌
4. مُحدِّد النوع (Type selector). ❌
بناءً على كود CSS التالي، ما هو لون النص؟
<head>
<style>
#unique {
color: purple;
}
.highlight {
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<p id="unique" class="highlight">هذا النص</p>
</body>
1. أخضر green. ❌
2. أزرق blue. ❌
3. أحمر red. ❌
4. أرجواني purple. ✅