❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux 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}
جرب الكود
الدرس التالي❯ ❮الدرس السابق