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