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

الآن عليك معرفة أنه كلما كنت أدق في تحديد العنصر كلما إزدادت الرتبة و إليك بعض الأمثلة.

أمثلة

في الجدول التالي يظهر لك كيف يتم إحتساب رتبة المحددات بدقة.

المزيد حول قواعد Specificity

في حال كانت المحددات متطابقة في المرتبة فإن المحدد الموضوع في الأخير هو من سيتم إعطاؤه الأولوية.

/* 0-0-1 */
p {color: blue;}

/* 0-0-1 */
p {color: red;}
        

في حال استخدام 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 لزيادة رتبة المحدد.

/* 1-0-0 */
#demo {color: blue;}

/* 3-0-0 */
#demo#demo#demo {color: red;}
        

في المثال التالي قمنا بتكرار إسم الـ class لزيادة رتبة المحدد.

/* 0-1-0 */
.demo {color: blue}

/* 0-4-0 */
.demo.demo.demo.demo {color: red}