لعلك في يوم ما سألت نفسك لماذا inline-style  يكون اقوي من العناصر الأخري ويتم تطبيق القيم التي بداخله او لماذا يكون الـid اقوي من الـclass او لماذا important! تطغي علي كل هؤلاء وتنفذ القيمه التي تحملها.

سنتحدث اليوم عن مصطلح CSS Specificity وهو السبب الرئيسي لما يحدث في تطبيق عنصر علي اخر.

ما هي الـ CSS Specificity ؟ 

تعني الـ CSS Specificity ان اى خاصيه للعنصر هي الأكثر مُلائمة له وذات صله قويه به وبالتالي هي التي يتم اختيارها وتطبيقها علي العنصر عوضا عن العناصر او القيم الأخري  ويتم تحديدها بناءا علي عناصر CSS.

اذا كيف يتم تحديد الـ CSS Specificity ؟

كما اشرت انه يتم تحديدها بناءا علي عناصر CSS و لكن اى عناصر يتم تحديدها وكيف؟

كما نعرف سابقا ان:
- النمط"style" اذا وجد داخل العنصر اى "inline-style" يتم تطبيق الخصائص التي بداخله علي العنصر ويتجاهل بقيه الخصائص اذا كانت في ملف اخر.

- ايضا اذا وجدت كلمة important! في ملف النمط الخاص فانها تطغي علي اى خصائص أخري حتي ولو كانت خصائص داخل العنصر "inline-style".

- ايضا اذا وجد للعنصر نوعين من الخصائص في ملف النمط يتم تطبيق الخصائص التي وجدت في النهاية.

ما ذكرته الان هو CSS Specificity و لكن لم نعرف علي اى اساس هذا العنصر يطبق وهذا لا ، او لماذا تطغي important! علي inline-style.

يتم تحديد هذا طبقا لهذه النقاط التاليه:

1- لو وجد النمط علي هيئه inline-style  يكون هو اقوي عنصر و يتم تحديدها علي اساس ارقام ويكون رقمه هو (1000) .

2- لو تم تعريف المحدد"Selector" بـ id مثل id#  يكون رقمه (0100) او 100.

3- لو تم تعريف المحدد"Selector" بـ class مثل (class.) او attributes مثل [attributes]  او pseudo-classes مثل :hover يكون رقمه (0010) او 10.

تنويه: عنصر الـ ()not: في pseudo-classes  لا يتم احتسابه و يتم احتساب العنصر الذي بداخله فقط.

4- لو تم تعريف المحدد"Selector" بـ اسم العنصر مثل (p) او العناصر المزيفه pseudo-elements مثل before: يكون رقمه (0001) او 1.

الان نعرف كيف يتم حساب العناصر واى عنصر يطغي علي الأخر فلنقم الان بتجربه وحساب العناصر مع بعضنا:

الان قمنا بحساب CSS Specificity لهذا الكود:
1- لم نجد اى inline-style  اذا تصبح القيمة 0.
2- وجدنا id وكما قلنا قبل ان الid = 100.
3- وجدنا class وكما قلنا سابقا class = 10.

4- وجدنا 3 عناصر وكما قلنا ان element = 1 وهنا وجدنا 3 اى تصبح 3.

اذن في النهايه مجموع هذه الارقام = 3 + 10 + 100 = 113

ندخل في حساب CSS Specificity لكود أخر:

1- لم نجد اى inline-style اذا تصبح القيمة 0.

2- وجدنا id وكما قلنا قبل ان الid = 100.

3- وجدنا class وكما قلنا سابقا class = 10 و ايضا وجدنا pseudo-class = 10.

4- وجدنا 3 عناصر وكما قلنا ان element = 1 وهنا وجدنا 3 اى تصبح 3.

اذن في النهايه مجموع هذه الارقام = 3 + 20 + 100 = 123

ندخل في حساب CSS Specificity لكود أخر: 

كما ذكرت في البدايه ان جميعنا نعرف عند تواجد عنصرين مشابهين لبعض يتم تطبيق العنصر الاخير و لكن يجب تصحيح ذلك وقول هو عندما يوجد عنصرين متشابهين لبعض في النوع و في الـCSS Specificity يتم تطبيق العنصر الأخير.

ننهي هذا بالمقارنه الاخيرة:

الان نقوم بتحليل ايهما اكثر دقه بالرغم من تشابه الأثنين كثيرا:

نبدأ بـ A :

1- لم نجد اى inline-style اذا تصبح القيمة 0.

2- وجدنا id وكما قلنا قبل ان الid = 100.

3- لم نجد اى class اذا تصبح القيمة 0.

4- وجدنا عنصر وكما قلنا ان element = 1.

اذن في النهايه مجموع هذه الارقام =  1 + 0 + 100 + 0 = 101

ننتهي بـ B :

1- لم نجد اى inline-style اذا تصبح القيمة 0.

2- لم نجد اى id اذا تصبح القيمة 0.

3- وجدنا عنصر وكما قلنا ان Attribute= 10.

4- وجدنا عنصر وكما قلنا ان element = 1.

اذن في النهايه مجموع هذه الارقام = 1 + 10 + 0 + 0 = 11

وهذا يثبت ان A أكثر دقه من B.

في النهايه الكثير يسأل نفسه الأن اين important! من كل هذا أقول له ان important! تطغي علي كل هؤلاء ويمكن اعتبار رقمه هو (10000) اى انها ستطغي علي كل العناصر حتي ولو كان العنصر inline-style.

بالرغم من سهوله الـCSS Specificity الا ان الكثير لم يسمع عنها ويجب عليك وضعها في الاعتبار  حتي لا تقع في اخطاء فيما بعد وقارن دائما بين العناصر المتشابهه ودقتها حتي تعرف اى عنصر سيتم تطبيق خصائصه من قبل المتصفح.

المصادر:
W3C

smashingmagazine

css-tricks