ویژگی اختصاصی سازی (Specificity)
«اختصاصی سازی CSS» یعنی میزان قدرت هر انتخاب گر. وقتی چند قانون روی یک عنصر می افتند، قانون با اختصاصی سازی بالاتر برنده می شود. پس با شناخت اولویت ها، تعارض ها را ساده حل می کنیم.
اختصاصی سازی یعنی چه؟
اختصاصی سازی (Specificity) یک «الگوریتم» است؛ یعنی روشی گام به گام برای انتخاب برنده. ترتیب قدرت معمولاً این است: سبک درون خطی، سپس id، بعد کلاس/ویژگی/شبه کلاس، و در آخر عنصر/شبه عنصر.
نمونه: عنصر ساده
اینجا رنگ تمام پاراگراف ها قرمز می شود. چون فقط انتخاب گر عنصر داریم.
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
کلاس قوی تر از عنصر
کلاس (.test) از عنصر قوی تر است؛ پس رنگ سبز اعمال می شود.
<html>
<head>
<style>
.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
شناسه (id) قوی تر از کلاس
id (#demo) از کلاس و عنصر قوی تر است؛ پس رنگ آبی می شود.
<html>
<head>
<style>
#demo { color: blue; }
.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
سبک درون خطی؛ قوی ترین حالت
style داخل تگ از همه قوی تر است؛ اینجا رنگ صورتی می برد.
<html>
<head>
<style>
#demo { color: blue; }
.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
سلسله مراتب و وزن ها
وزن های معمول: سبک درون خطی > id (1-0-0) > کلاس/ویژگی/:hover (0-1-0) > عنصر/::before (0-0-1) > * و :where() (0-0-0).
<html>
<head>
<style>
#demo { color: blue; }
p#demo { color: orange; }
.test { color: green; }
p.test { color: green; }
p { color: red; }
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
گام های عملی
- اول تعارض را شناسایی کن.
- وزن انتخاب گرها را مقایسه کن.
- در صورت نیاز، ساختار انتخاب گر را ساده کن.
- تا حد ممکن از id کمتر استفاده کن.
- از کلاس های معنادار کمک بگیر.
نکته: اگر وزن ها برابر شوند، قانون دیرترِ فایل، برنده است.
جمع بندی سریع
- inline > id > کلاس > عنصر.
- :where() وزن نمی دهد.
- برابری وزن یعنی قانون آخر برنده.
- سادگی، نگه داری را آسان می کند.
برای اختصاصی سازی CSS این صفحه مرجع است. برای «واحدها» به واحدها برو و برای فیلتر دقیق اجزا از انتخاب گرهای ویژگی کمک بگیر.