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