محاسبه Specificity در CSS

محاسبه Specificity در CSS؛ کدام استایل برنده می‌شود؟

استایلی نوشته‌اید که «درست به نظر می‌رسد»، اما روی عنصر اعمال نمی‌شود؟ در بیشتر موارد، دلیلش Specificity است. وقتی چند قانون CSS یک عنصر را هدف می‌گیرند، مرورگر با محاسبه‌ی Specificity، یعنی میزان دقیق و خاص بودن انتخاب‌گرها، تصمیم می‌گیرد کدام قانون اعمال شود. با ابزار محاسبه Specificity تولتولیا کافی است یک انتخاب‌گر را وارد کنید تا امتیاز آن را جزءبه‌جزء ببینید، یا دو انتخاب‌گر را مقایسه کنید تا بفهمید کدام برنده می‌شود.

ویژگی‌های ابزار

• محاسبه‌ی امتیاز Specificity به‌صورت چهاربخشی، همان‌طور که مرورگر محاسبه می‌کند.
• مقایسه‌ی دو انتخاب‌گر و اعلام انتخاب‌گر برنده.
• بررسی اثر !important روی هر انتخاب‌گر.
• پشتیبانی از انتخاب‌گرهای مدرن: :is()، :not()، :has() و :where().
• مثال‌های آماده برای شروع سریع.
• رایگان و بدون ثبت‌نام.

آموزش استفاده

1. انتخاب‌گر موردنظر را در کادر «انتخاب‌گر A» وارد کنید، یا روی یکی از مثال‌های آماده بزنید.
2. برای مقایسه، انتخاب‌گر دوم را در «انتخاب‌گر B» وارد کنید.
3. اگر یکی از قوانین !important دارد، گزینه‌ی مربوط به آن را فعال کنید.
4. امتیاز هر انتخاب‌گر و نتیجه‌ی مقایسه را ببینید.

Specificity چطور محاسبه می‌شود؟

امتیاز Specificity از چهار بخش تشکیل می‌شود که از چپ به راست اهمیت کمتری دارند:

بخششاملمثال۱. استایل درون‌خطیاستایل نوشته‌شده در ویژگی stylestyle="color:red"۲. شناسه‌هاانتخاب‌گرهای ID#header۳. کلاس‌هاکلاس‌ها، ویژگی‌ها و شبه‌کلاس‌ها.nav، [disabled]، :hover۴. عناصرنام تگ‌ها و شبه‌عنصرهاdiv، a، ::before

مقایسه بخش‌به‌بخش و از چپ انجام می‌شود؛ بنابراین یک شناسه همیشه از هر تعداد کلاس قوی‌تر است. برای مثال، #header a با امتیاز (0,1,0,1) از .nav .menu .item a با امتیاز (0,0,3,1) قوی‌تر است.

امتیاز چند انتخاب‌گر رایج

انتخاب‌گرامتیاز#header .nav a:hover0,1,2,1.btn.btn-primary[disabled]0,0,3,0ul li:nth-child(2)::before0,0,1,3div.container > p0,0,1,2a:not(.disabled)0,0,1,1:where(.card) p0,0,0,1

ترکیب‌کننده‌هایی مثل >، +، ~ و فاصله، و همچنین انتخاب‌گر همه‌چیز *، هیچ امتیازی ندارند.

:is()، :not()، :has() و :where()

• :is()، :not() و :has() خودشان امتیازی ندارند و امتیاز قوی‌ترین انتخاب‌گر داخل پرانتز را می‌گیرند. برای مثال، :not(.disabled) همان امتیاز یک کلاس را دارد.
• :where() همیشه امتیاز صفر دارد؛ به همین دلیل برای نوشتن استایل‌های پایه و بازنشانی که بعداً باید راحت بازنویسی شوند، بسیار مناسب است.

!important و ترتیب قوانین

• ترتیب قوانین: اگر دو انتخاب‌گر امتیاز یکسانی داشته باشند، قانونی که دیرتر در فایل CSS آمده برنده است. اگر امتیازها متفاوت باشند، امتیاز بالاتر برنده است، صرف‌نظر از ترتیب.
• !important: قانونی که !important دارد، بدون توجه به Specificity برنده می‌شود. اگر هر دو قانون !important داشته باشند، دوباره Specificity و سپس ترتیب قوانین تعیین‌کننده است. استفاده‌ی زیاد از آن، نگهداری CSS را سخت می‌کند.
• لایه‌های CSS: اگر از @layer استفاده می‌کنید، ترتیب لایه‌ها پیش از Specificity بررسی می‌شود؛ یعنی یک قانون در لایه‌ی بالاتر، حتی با امتیاز کمتر، برنده است.

کاربردهای ابزار

• اشکال‌یابی: فهمیدن اینکه چرا یک استایل اعمال نمی‌شود.
• بازنویسی استایل قالب‌ها: نوشتن انتخاب‌گری که استایل قالب وردپرس یا کتابخانه‌ای مثل بوت‌استرپ را بدون !important بازنویسی کند.
• بازبینی کد: بررسی اینکه قانون جدید ناخواسته بر قانون‌های قبلی غلبه نمی‌کند.
• یادگیری CSS: درک دقیق نحوه‌ی عملکرد آبشار CSS.

ابزارهای دیگر CSS تولتولیا مثل تبدیل px به rem، Border Radius ساز و ساخت clip-path را هم امتحان کنید.

سؤالات متداول

چرا استایل CSS من اعمال نمی‌شود؟

رایج‌ترین دلیل این است که قانون دیگری با Specificity بالاتر همان ویژگی را تنظیم کرده است. انتخاب‌گر خود و انتخاب‌گر رقیب را (که در ابزار توسعه‌دهنده‌ی مرورگر خط خورده نمایش داده می‌شود) در این ابزار مقایسه کنید. دلایل دیگر می‌تواند !important، ترتیب فایل‌ها یا اشتباه تایپی در انتخاب‌گر باشد.

آیا ده کلاس از یک شناسه قوی‌تر است؟

خیر. امتیازها بخش‌به‌بخش مقایسه می‌شوند و جمع نمی‌شوند؛ بنابراین یک شناسه همیشه از هر تعداد کلاس قوی‌تر است.

امتیاز :not() چقدر است؟

خود :not() امتیازی ندارد و امتیاز قوی‌ترین انتخاب‌گر داخل پرانتز را می‌گیرد؛ برای مثال، :not(.disabled) دقیقاً امتیاز یک کلاس را دارد.

چرا :where() امتیاز صفر دارد؟

این رفتار عمداً طراحی شده تا بتوان انتخاب‌گرهای پیچیده برای استایل‌های پایه نوشت، بدون اینکه بازنویسی آن‌ها در ادامه سخت شود.

آیا ترتیب قوانین در فایل CSS مهم است؟

فقط وقتی امتیاز Specificity دو قانون برابر باشد. در این حالت، قانونی که دیرتر آمده اعمال می‌شود.