حاسبة خصوصية CSS

خصوصية CSS هي وزن يُعيَّن لمحدد CSS يحدد قاعدة النمط المطبقة عند تطابق قواعد متعددة مع نفس العنصر. تُمثَّل كقيمة ثلاثية الأجزاء (a, b, c) حيث يحسب a محددات ID، وb محددات الفئة/السمة/الفئة الزائفة، وc محددات نوع العنصر والعناصر الزائفة.

تُحسب الخصوصية بعد فئات ثلاث في المحدد: (a) محددات ID مثل #header، (b) محددات الفئة (.card) ومحددات السمة ([type="text"]) والفئات الزائفة (:hover, :nth-child)، و(c) محددات النوع (div, p) والعناصر الزائفة (::before). المحدد العالمي (*) والجامعات (+, ~, >) لا تضيف خصوصية.

يفوز المحدد ذو الخصوصية الأعلى. قارن قيم (a, b, c) من اليسار إلى اليمين: عدد أكبر من ID (a) يتغلب دائماً على عدد أكبر من الفئات (b)، وعدد أكبر من الفئات يتغلب دائماً على عدد أكبر من العناصر (c). إذا تساوت الخصوصية، تفوز القاعدة الأحدث في ورقة الأنماط.

الدرجة الرقمية هي قيمة قابلة للمقارنة مبسطة (a * 10000 + b * 100 + c) لترتيب المحددات. لا ينبغي تفسيرها كقيمة CSS حرفية — خصوصية CSS ليست رقماً واحداً بل مقارنة ثلاثية الأجزاء.

!important ليس جزءاً من الخصوصية — إنه يتجاوز جميع التصريحات الأخرى بغض النظر عن الخصوصية. تحسب هذه الأداة خصوصية المحدد فقط دون تأثير !important. تجنب استخدام !important في CSS الإنتاجي.

لا. المحدد العالمي (*) له خصوصية صفرية (0, 0, 0). الجامعات (+, >, ~, مسافة) أيضاً لا تضيف أي خصوصية. فقط محددات ID والفئة والسمة والفئة الزائفة والعنصر والعنصر الزائف تضيف إلى الخصوصية.

الفئة الزائفة :not() نفسها لا تملك خصوصية، لكن المحدد بداخلها يملك. على سبيل المثال، :not(#id) تساهم بـ (1, 0, 0) في الخصوصية (معرّف واحد). تأخذ هذه الأداة :not() بعين الاعتبار عبر تحليل الحجة داخل الأقواس.

:: هو بناء الجملة الحديث بنقطتين مزدوجتين للعناصر الزائفة (::before, ::after, ::placeholder). بناء الجملة القديم بنقطة واحدة (:before, :after) لا يزال مدعوماً لكنه قديم. كلاهما يضيف 1 إلى عداد c (العنصر/العنصر الزائف).

الأنماط المضمنة (مثل style="color: red") لها خصوصية (1, 0, 0, 0) — أعلى من أي محدد — ممثلة كفئة رابعة غير مغطاة بهذه الأداة. من الناحية العملية، تتجاوز الأنماط المضمنة دائماً قواعد ورقة الأنماط (إلا إذا استُخدم !important).

نعم. عندما يكون لمحددين نفس قيم (a, b, c)، يفوز الذي يظهر لاحقاً في الترتيب المصدري. تعرض هذه الأداة المحددات بنفس الترتيب عند تساوي الدرجات، ويمكنك مراجعة تفصيل (a, b, c) للتحقق من التكافؤ الحقيقي.

الخصوصية العالية تجعل الأنماط أصعب في التجاوز والصيانة. لتجاوز نمط ما، يجب كتابة محدد أكثر تحديداً أو استخدام !important. إبقاء الخصوصية منخفضة يجعل CSS أكثر وحدية وقابلية للتنبؤ خاصة في قواعد الشفرة الكبيرة.

تدعم الأداة أكثر محددات CSS3 شيوعاً بما فيها IDs والفئات والسمات والفئات الزائفة (بما فيها :not()) والعناصر الزائفة ومحددات النوع. المحددات الحديثة المعقدة كـ :is() و:where() و:has() قد لا تُحلَّل بالكامل.