❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSأولوية التحديد

  • مفهوم أولوية التحديد
  • كيف يقرر المتصفح أي قيمة يعتمد؟
  • كيف يتم حساب Specificity ؟
  • المزيد حول قواعد Specificity
  • الكملة المفتاحية !important
  • حيلة لزيادة الرتبة

مفهوم أولوية التحديد

في حال وجود أكثر من محدد يشيرون لنفس العنصر و عندهم ذات الخصائص فإن المحدد الذي يملك رتبة أعلى هو من سيتم تنفيذ خصائصه. هذا الأسلوب في الإختيار يتم عن طريق خوارزمية تسمى 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>
<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

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

مثال

/* 0-0-1 */
p {color: blue;}
/* 0-0-1 */
p {color: red;}
/* 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;}
/* 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;}
/* 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;}
/* 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;}
/* 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}
/* 0-1-0 */ .demo {color: blue} /* 0-4-0 */ .demo.demo.demo.demo {color: red}
جرب الكود
الدرس التالي❯ ❮الدرس السابق