اولویت‌بندی
اولویت بندی (به انگلیسی: specificity) چیست؟
اگر دو یا چند قانون CSS که به یک عنصر یکسان اشاره می‌کنند با یکدیگر تداخل داشته باشد، مرورگر از برخی قوانین تبعیت می‌کند تا مشخص کند که کدام یک بیشترین اهمیت را دارد و می‌بایست اجرا گردد.
اولویت را مانند یک امتیاز / رتبه تصور کنید که تعیین می‌کند کدام یک از اعلان ها باید روی یک عنصر اعمال شوند. انتخابگر همگانی (به انگلیسی: universal) (*) کمترین اولویت را دارد، در حالی که انتخابگرهای ID بیشترین اولویت را دارند! [۱]
سلسله مراتب اولویت بندی
هر انتخابگر جایگاه خود را در سلسله مراتب اولویت دارد. چهار دسته‌بندی وجود دارد که سطح اولویت یک انتخابگر را مشخص می‌کند:
استایل‌های درون خطی - استایل درون خطی مستقیماً به عنصری که باید استایل دهی شود، متصل می‌شود. مثال: <h1 style="color: #ffffff;">
ID ها - ID یک شناسه منحصر به فرد برای عناصر صفحه، مانند #navbar است.
کلاس‌ها، خاصیت‌ها و شبه کلاس‌ها - این دسته شامل کلاس ها، خاصیت‌ها و شبه کلاس‌ها مانند :hover، :focus و... می‌شود.
عناصر و شبه عناصر - این دسته شامل نام عناصر و شبه عناصر، مانند h1،div، :before و :after می‌شود.
چگونه اولویت بندی را محاسبه کنیم؟
نحوه محاسبه اولویت را به خاطر بسپارید!
از ۰ شروع کنید، به ازای خاصیت‌های مربوط به استایل ۱۰۰۰ تا اضافه کنید، برای هر ID، ۱۰۰ تا اضافه کنید، و به ازای هر خاصیت، کلاس یا شبه کلاس ۱۰ تا اضافه کنید، به ازای نام هر عنصر یا شبه عنصر ۱ اضافه کنید:
این سه قسمت کد را در نظر بگیرید:
1 A: h1
2 B: #content h1
3 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
اولویت A، ۱ است (یک عنصر)
اولویت B، ۱۰۱ است (یک ID و یک عنصر)
اولویت C، ۱۰۰۰ است (استایل دهی داخلی)
از آنجایی که ۱ < ۱۰۱ < ۱۰۰۰، سومین تکه کد (C) بیشترین اولویت را دارد، و آن اعمال خواهد شد.
قوانین اولویت بندی
اولویت برابر: آخرین دستور در نظر گرفته می‌شود - اگر یک دستور برابر، دو بار در فایل style sheet خارجی نوشته شود، در این حالت دستور پایین تر در style sheet به عنصری که می‌بایست استایل دهی شود
نزدیک‌تر است، بنابراین روی عنصر اعمال می‌شود:
دستور دوم همیشه اعمال می‌شود.
انتخابگرهای ID اولویت‌های بیشتری نسبت به انتخابگرهای خاصیت (به انگلیسی: attribute) دارند - نگاهی به چند خط کد زیر بیندازید:
دستور اول بیشتر از دستور دوم اولویت دارد، و اعمال خواهد شد.
انتخابگرهای Contexual خاص تر از یک انتخابگر تکی می‌باشند - style sheet تعبیه شده به عنصری که می‌بایست استایل دهی شود نزدیک‌تر است؛ بنابراین در شرایط زیر آخرین دستور اعمال می‌شود.
1 From external CSS file:
2 #content h1 {background-color: red;}
3
4 In HTML file:
5 <style>
6 #content h1 {
7 background-color: yellow;
8 }
9 </style>
انتخابگر کلاس، اولویت بندی بیشتری نسبت به سایر انتخابگرهای عناصر دارد - یک انتخابگر کلاس مانند .intro نسبت به h1، p، div و.. اولویت بیشتری دارد.
انتخابگر همگانی و مقادیر ارث بری شده اولویت ۰ دارند. - *, body * و موارد مشابه اولویت ۰ دارد. مقادیر ارث‌بری شده اولویت ۰ دارند.
منابع آموزشی