CSS أولوية التحديد
مفهوم أولوية التحديد
في حال وجود أكثر من محدد يشيرون لنفس العنصر و عندهم ذات الخصائص فإن المحدد الذي يملك رتبة أعلى هو من سيتم تنفيذ خصائصه. هذا الأسلوب في الإختيار يتم عن طريق خوارزمية تسمى Specificity.
إذاً أولوية التحديد يقصد بها ما هو المحدد الذي يملك الرتبة الأعلى لكي يتم تنفيذ خصائصه.
كيف يقرر المتصفح أي قيمة يعتمد؟
بشكل عام، الخصائص الغير مشتركة بين المحددات يطّبقها المتصفح مباشرةً على العنصر.
بينما الخصائص المشتركة بينهم يتم اعتماد من هي موضوعة في المحدد الذي يملك رتبة أعلى.
كمثال بسيط، الوسم <p id="demo">
يمكن الوصول له بواسطة المحدد p { }
أو #demo { }
.
الآن ماذا لو قمنا باستخدام كلا المحددين في ذات الوقت و استخدمنا نفس الخصائص فيهما مع إعطاءهم قيم مختلفة. ما هو المحدد الذي سيقرر المتصفح إعتماد قيم قيمته؟
لاحظ أنه تم تطبيق الخاصية font-weight: bold;
لأنها ليست مشتركة بين المحددين p { }
أو #demo { }
. أما بالنسبة للخاصية color
فهي مكررة في كلا المحددين لذلك على المتصفح اختيار قيمة واحدة فقط و بدوره سيختار color: red;
لأن تحديد العنصر من خلال id
يُعتبر أعلى مرتبة.
مثال
<style> #demo { color: red; } p { color: blue; font-weight: bold; } </style> <p id="demo">Specificity Test</p>جرب الكود
كيف يتم حساب Specificity ؟
مبدئياً يتم وضع رتبة المحدد على ثلاث خانات هي ID-CLASS-TYPE
و هذا مثال 1-0-0
.
كلما كان الرقم في الجهة اليسرى أعلى كلما كان رتبة المحدد أعلى.
قواعد حساب الرتبة
القواعد التالية هي التي تطبقها خوارزمية Specificity لتحديد أي قيمة سيتم إعتمادها عند وجود خصائص مشتركة بين المحددات:
- التحديد بواسطة
*
يساوي0-0-0
- التحديد بواسطة إسم الوسم يساوي
0-0-1
- التحديد بواسطة
class
يساوي0-1-0
- التحديد بواسطة
id
يساوي1-0-0
- تمرير الخصائص بواسطة
style
يساوي1-0-0-0
الآن عليك معرفة أنه كلما كنت أدق في تحديد العنصر كلما إزدادت الرتبة و إليك بعض الأمثلة.
أمثلة
في الجدول التالي يظهر لك كيف يتم إحتساب رتبة المحددات بدقة.
Selector | Calculation | Specificity |
---|---|---|
div { } | 0-0-1 | 0-0-1 |
div p { } | 0-0-1 + 0-0-1 | 0-0-2 |
.intro { } | 0-1-0 | 0-1-0 |
.intro a { } | 0-1-0 + 0-0-1 | 0-1-1 |
p.intro a { } | 0-0-1 + 0-1-0 + 0-0-1 | 0-1-2 |
#main { } | 1-0-0 | 1-0-0 |
#main .intro { } | 1-0-0 + 0-1-0 | 1-1-0 |
#main .intro span { } | 1-0-0 + 0-1-0 + 0-0-1 | 1-1-1 |
#main #news article a.active { } | 1-0-0 + 1-0-0 + 0-0-1 + 0-0-1 + 0-1-0 | 2-1-2 |
* { } | 0-0-0 | 0-0-0 |
<p style="color: blue;"> | 1-0-0-0 | 1-0-0-0 |
المزيد حول قواعد Specificity
في حال كانت المحددات متطابقة في المرتبة فإن المحدد الموضوع في الأخير هو من سيتم إعطاؤه الأولوية.
في حال استخدام Attribute Selector مثل [type=text]
أو استخدام Pseudo Class مثل :focus
فإنه يضيف 0-1-0
إلى مرتبة المحدد.
مثال
/* 0-0-1 */ input {color: red;} /* 0-1-1 */ input[type=text] {color: blue;} /* 0-2-1 */ input[type=text]:focus {color: green;}جرب الكود
في المثال التالي لاحظ كيف أن أسلوب الإعتماد على القيمة التي تحدد العنصر يؤثر على مرتبته.
مثال
/* 1-0-0 */ #demo {color: gray;} /* 1-0-1 */ p#demo {color: red;} /* 0-1-1 */ p[id=demo] {color: blue;}جرب الكود
الكملة المفتاحية !important
يمكن إضافة هذه الكلمة بعد قيمة الخاصية لإعلام المتصفح أنك تريد تطبيقها و تجاهل أي محدد آخر يحاول تغيير القيمة نفسها.
هذه الكلمة مفيدة جداً في حال كنت تتعامل مع مكتبات تصميم جاهزة و تريد تغيير خصائصها لتتناسب مع التصميم الذي تعمل عليه بدون الحاجة لتعديل ملفات المكتبة نفسها.
مثال
/* 1-0-0 */ #demo {color: red;} /* إستخدم هذه القيمة و تجاهل أي محدد آخر يحاول تغييرها */ p {color: blue !important;}جرب الكود
حيلة لزيادة الرتبة
عند تحديد العناصر يمكنك تكرار إسم الـ id
و إسم الـ class
بشكل متلاصق إذا أردت مضاعفة ترتيبهم.
في المثال التالي قمنا بتكرار إسم الـ id
لزيادة رتبة المحدد.
في المثال التالي قمنا بتكرار إسم الـ class
لزيادة رتبة المحدد.