​​معرفی CSS Specificity:
فرض کنید در ساختار HTML زیر با CSS عنصر داخلی را انتخاب کنیم:

<div id="parent">
    <div class="child"></div>
</div>

معمولا بیشتر از یک راه برای انتخاب عنصر وجود دارد. برای مثال همه‌ی این انتخابگر‌ها عنصر مورد نظر را برای ما انتخاب می‌کنند:
#parent .child
.child
div.child
...
در عمل بار‌ها پیش می‌آید که چندین دستور با انتخابگر‌های متفاوت، استایل‌های متفاوتی را بر روی یک عنصر اعمال می‌کنند. در این شرایط کدام یک از استایل‌ها برای عنصر اعمال می‌شود ؟ برای حل این مشکل مفهوم CSS Specificity استفاده می‌شود.
به اینصورت که به هر انتخابگر بر اساس نوع آن امتیازی تعلق می‌گیرد و انتخابگر با بیشترین امتیاز اعمال می‌شود.
دسته بندی انتخابگر‌ها و امتیاز آن‌ها به این شکل است:
1) inline style ==> 1, 0, 0, 0
2) ID ==> 0, 1, 0, 0
3) Class - attributes selector - pseudo-classe ==> 0, 0, 1, 0
4) Type selector - pseudo-element ==> 0, 0, 0, 1

--) اما چرا امتیاز‌ها را به جای 1و 10 و 100 و 1000 به این شکل نمایش می‌دهیم ؟
در واقع این امتیاز ها در سیستم دهدهی محاسبه نمی‌شوند. به عنوان مثال انتخابگر‌های class و id را در نظر بگیرید. اگر انتخابگر class را با 10 و انتخابگر id را با 100 نشان می‌دادیم به این معنی بود که 10 انتخابگر کلاس برابر با یک انتخابگر ‌id است. اما این‌طور نیست و اهمیت id selector بیشتر از class selector است.
در واقع اگر تعداد id selector ها برابر بود، بعد به سراغ شمارش class selector ها می‌رویم.
#test > .a.b.c.d.e.f.g.h.i.j.k

این موضوع را در طول هفته بیشتر بررسی خواهیم کرد.

#quicktip #css

@ProGraphs

🔺 یک بازی ساده برای تست مهارت‌های طراحی شما ✌🏻

https://cantunsee.space/

#link #design #test

@ProGraphs