حاسبة أولوية المحدد في CSS: أي قاعدة تفوز ولماذا

طريقة الاستخدام

اكتب في المحدد محدداً كما يُكتب في ملف الأنماط.
اكتب محدداً ثانياً في المحدد الثاني (اختياري) لمقارنة المحددين، أو اتركه فارغاً.
اقرأ الأولوية (a، b، c) للمحدد الأول، والقاعدة الفائزة إذا أدخلت محددين.
استعمل جدول الأجزاء التي عُدّت لترى أي جزء من كل محدد أعطى كل رقم.

كيف تُعدّ الأرقام الثلاثة

تعدّ توصية محددات المستوى الثالث (باللغة الإنجليزية) المحدد في ثلاثة أعمدة. وتقارن الأداة الأرقام من اليسار إلى اليمين: أولاً a، ثم b، ثم c. ولا تُحسب علامة النجمة * ولا عوامل الربط مثل >، أو +، أو ~.

a عدد محددات المعرّف (ID)، مثل #nav.
b عدد محددات الفئة، مثل .active، ومحددات السمات، مثل [href]، والأصناف الزائفة، مثل :hover.
c عدد محددات النوع، مثل li أو a، وعدد العناصر الزائفة، مثل ::before.

الأصناف الزائفة التي لها وسائط

تُحسب :is() وكذلك :not() و:has() بأعلى أولوية في وسيطها، فالمحدد :is(#a, .b) أولويته (1، 0، 0). أما :where() فلا تُحسب شيئاً. وتُحسب :nth-child() صنفاً زائفاً واحداً مع أعلى محدد في قائمة ”of S“ الخاصة بها، فأولوية :nth-child(even of li, .item) هي (0، 2، 0). وهذه القواعد من مسودة محددات المستوى الرابع (باللغة الإنجليزية)، وهي مسودة محرّر قد تتغير.

ما لا تفعله الأداة

تحسب العنصر الزائف الذي له وسيط، مثل ::part(x)، عنصراً زائفاً واحداً، ولا تقرأ وسيطه.
لا تقرأ التداخل بالرمز &، وتأخذ محدداً واحداً في كل مرة، لا قائمة مفصولة بفواصل.
لا ترى ملف الأنماط، لذلك إذا تساوى محددان تقول إن القاعدة التي تأتي بعدها تفوز، وتترك الترتيب لك.

مثال محلول: رابط في شريط التنقل

يحتوي المحدد الأول #nav li.active > a:hover على معرّف واحد، هو #nav. وفيه فئة واحدة، هي .active، وصنف زائف واحد، هو :hover، فيكون مجموع b اثنين. وفيه نوعان من محددات النوع، هما li وa، فيكون c اثنين. فأولويته (1، 2، 2).

ويحتوي المحدد الثاني #nav a على معرّف واحد ونوع واحد، فأولويته (1، 0، 1). يفوز المحدد الأول، لأن a متساوية، وb وc أعلى فيه.

المحدد	a	b	c
#nav li.active > a:hover	1	2	2
#nav a	1	0	1

الأسئلة الشائعة

لماذا يُحسب المعرّف في العمود الأول؟

تقارن الأداة الأعمدة من اليسار إلى اليمين، فيُحسم عمود المعرّفات a أولاً. فالمحدد الذي فيه معرّف زائد يكون له a أعلى، ولا تُنظر الفئات والأنواع في b وc في تلك الحالة.

هل يهم ترتيب القواعد في ملف الأنماط؟

لا يهم إلا حين يتساوى محددان في الأولوية. وتنص مواصفة CSS Cascade، المستوى الرابع (باللغة الإنجليزية) على أن آخر تصريح في ترتيب المستند يفوز عند هذه النقطة، فتسري القاعدة التي تأتي بعدها.

لماذا تزيد :not(#a) الأولوية؟

لا يُحسب الصنف الزائف :not() نفسه، لكن وسيطه يُحسب. ومثال محددات المستوى الثالث #s12:not(FOO) أولويته (1، 0، 1): معرّف واحد من #s12، ونوع واحد من الوسيط FOO.

هل يُضيف محدد النجمة أو عوامل الربط شيئاً؟

لا. يُتجاهل محدد النجمة، وكذلك عوامل الربط مثل >، أو +، أو ~. والمثال * في قسم المستوى الثالث أولويته (0، 0، 0).

هل تشمل الأداة الأنماط المضمّنة وقاعدة !important؟

لا. تحسب الأداة محدداً واحداً. فالترتيب يقارن المصدر والأهمية قبل الأولوية، لذلك قد تفوز قاعدة عليها !important أو نمط مضمّن مهما كانت أولوية محدداتها. قارن محددين فقط يضبطان الخاصية نفسها بالأهمية نفسها.

هل يُرسل المحدد الذي أكتبه إلى أي مكان؟

لا. تجري القراءة في متصفحك، ولا يُخزَّن ما تكتبه ولا يُرسل إلى خادمنا. تحقّق من النتيجة قبل أن تغيّر ملف الأنماط.

المصادر

آخر مراجعة للأرقام والنص: الخميس، 2 جمادى الآخرة 1448 بعد الهجرة.

النتيجة