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

ما خصوصية CSS؟#

حين تحاول قاعدتا CSS معًا ضبط الخاصية نفسها على العنصر نفسه، لا يختار المتصفّح المكتوبة أخيرًا — بل يختار ذات الخصوصية الأعلى. الخصوصية نتيجة ثلاثيّة الأجزاء (A, B, C) يقارنها التتالي كرقم إصدار:

• A — مُحدِّدات المعرّف (#header).
• B — مُحدِّدات الفئة (.btn)، ومُحدِّدات السمة ([type=email])، والفئات الكاذبة (:hover، :focus).
• C — مُحدِّدات النوع (div، a) والعناصر الكاذبة (::before، ::first-line).

يُقارَن A أولًا؛ التعادل يمرّ إلى B ثمّ C. معرِّف واحد (1,0,0) يتفوّق على أيّ عدد من الفئات (0,99,99)، التي تتفوّق بدورها على أيّ عدد من الأنواع. * الكليّ، والمُجمِّعات (> + ~)، ومُحدِّد التداخل & لا تضيف شيئًا.

تحسب هذه الصفحة ذلك الثلاثيّ لأيّ مُحدِّد تلصقه — بما في ذلك الفئات الكاذبة الوظيفيّة الحديثة :is() و:where() و:not() و:has() وبند of S لـ :nth-child() — وتُرتِّب قائمة مُحدِّدات، وتُظهر بالضبط أيّ قطع أسهمت بماذا. إنّها أسرع طريقة للإجابة عن سؤال CSS الكليّ: «لماذا تخسر قاعدتي؟».

كيف تستخدمها#

1. انقر مثال لتحميل مجموعة مُحدِّدات معمولة، أو امسح الصندوق والصق خاصتك. تستطيع إدخال مُحدِّد مجرّد (#nav .item) أو قاعدة كاملة (#nav .item { color: red })؛ تقرأ الأداة الجزء قبل {.
2. عدّة مُحدِّدات؟ افصلها بفواصل — تُرتَّب من الأكثر إلى الأقل خصوصيّة، ويُعلَّم الفائز.
3. تُعدِّد اللوحة اليمنى كلّ مُحدِّد بثلاثيّه (A, B, C) وتفكيك ملوَّن لكلّ قطعة مساهمة (أحمر = معرّف، أزرق = فئة/سمة/فئة كاذبة، أخضر = نوع/عنصر كاذب)، فترى لماذا النتيجة ما هي.
4. تُذكِّرك الأسطورة الملوَّنة في الأعلى يمينًا أيّ نقطة تُطابق A / B / C.
5. إن احتوت قاعدتك على !important، تظهر ملاحظة معلوماتيّة — !important تجاوز على مستوى التصريح يجلس فوق مقارنة الخصوصية، لا داخلها.

أبرز المزايا#

• صحيح في الحالات الصعبة. :where() دائمًا يسهم بـ (0,0,0)؛ يأخذ :is() / :not() / :has() أعلى خصوصيّة بين وسائطه؛ يُعالَج :before القديم وبند of S لـ :nth-child() وفق Selectors Level 4.
• يُرتِّب قائمة مفصولة بفواصل ويُعلِّم التعادل، فترى بنظرة أيّة قاعدة من عدّة ستفوز.
• تفكيك لكلّ قطعة. كلّ #id و.class و[attr] و:pseudo-class و::pseudo-element ونوع يُفصَّل بالنصّ الذي أسهم به بالضبط.
• يتحمّل القواعد الكاملة. الصق a:hover { text-decoration: underline } — تُنزَع التعليقات ويُهمَل كتلة التصريح تلقائيًّا.
• 100% محليّ. لا يغادر شيء الصفحة؛ لا يُجلب ملف أنماط أو يُقيَّم.

مثال عملي#

لغز تنقيح شائع: ثلاث قواعد كلّها تستهدف الوصلة نفسها، ويفوز اللون الخطأ. الصقها في الصندوق:

.button:hover
:is(.card, #hero) .button
a.button

يُرتَّب الناتج:

الفائز ليس الأكثر فئات. :is(.card, #hero) يرث أعلى خصوصيّة وسائطه — #hero معرِّف، فيحمل :is() (1,0,0) رغم أنّ .card لن يكون إلّا (0,1,0). إضافة .button ترفع B واحدًا، فتعطي (1,1,0). ذلك المعرِّف المفرد في العمود A يتفوّق على فئتي .button:hover (0,2,0) — وهي المفاجأة بالضبط التي تجعل :is() خطيرًا في CSS الإنتاجيّ.

لو احتجت التجميع نفسه دون رفع الخصوصيّة، لبدّلت :is() بـ :where():

:where(.card, #hero) .button   →   (0, 1, 0)

الآن يتعادل مع a.button ناقص النوع، ويُقرِّر ترتيب المصدر. هذا السبب كلّه لوجود :where().

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

لماذا يتفوّق معرِّف واحد على مئات الفئات؟#

تقارن الخصوصيّة الأعمدة من اليسار إلى اليمين كرقم إصدار، لا كمجموع كلّيّ. (1,0,0) «أمامَ» (0,999,999) لأنّ العمود A غير صفر في الأولى وصفر في الثانية؛ العمودان B وC لا يُستشارَان أبدًا. هذا متعمَّد — قُصد بالمعرِّفات أن تكون مُفرَدات غير ملتبسة.

ما الفرق بين :is() و:where()؟#

متطابقان في ما يُطابقانه، لكنّهما متضادّان في الخصوصيّة. يأخذ :is(.a, #b) أعلى خصوصيّة بين وسائطه (فيجعل #b إيّاه (1,0,0))؛ بينما :where(.a, #b) دائمًا يسهم بـ (0,0,0) بصرف النظر عن وسائطه. استخدم :where() للافتراضيّات منخفضة الخصوصيّة التي يمكنك تجاوزها بسهولة، و:is() عندما تريد فعلًا أن يتنافس المُحدِّد المُجمَّع.

هل تتتفوّق سمة style="…" المضمَّنة على هذه؟#

نعم. الأنماط المضمَّنة تتفوّق على أيّ قاعدة مبنيّة على مُحدِّد في التتالي العاديّ (تجلس في أصل أعلى)، فلا يُغطِّي ثلاثيّ مُحدِّد النمط المضمَّن بلا !important. هذا محور مختلف عن النتيجة (A,B,C)، ولهذا تُقيِّم الأداة المُحدِّدات فقط.

أين يقع !important؟#

!important علم على مستوى التصريح، لا خاصية مُحدِّد — لا يُغيِّر الثلاثيّ (A,B,C). ينقل التصريح كلّه إلى أصل تتالي أعلى، فتفوز قاعدة !important على قاعدة عاديّة بصرف النظر عن الخصوصية. تُلاحظ الأداة وجوده معلوماتيًّا لكنّها تُبقيه خارج النتيجة.