اولویت استایل ها و قوانین specificity در CSS
خوش اومدین به نوزدهمین جلسه از دوره آموزش رایگان CSS. ما تا اینجای دوره ویژگی های زیادی رو یادگرفتیم و به انتخابگرها (selectors) اختصاص دادیم. اما ویژگی هایی که در طول یک پروژه استفاده میکنیم بسیار زیاد هستند و ممکن هست یک تگ چندین بار استایل دهی بشه مثلا فرض کنید که ما یه تگ div داریم که از کلاس class1 استفاده میکنه. در زمان استایل دهی رنگ زمینه قرمز برای divها مشخص کردیم و برای کلاس class1 هم، رنگ زمینه آبی رو تعریف کردیم. حالا تکلیف این div توی خروجی چی میشه؟ باید آبی باشه یا قرمز؟ اینجاست که اهمیت اولویت استایل ها کاملا ملموس میشه و ما به قوانین specificity احتیاج پیدا میکنیم. پس بریم و با این موضوع فوق العاده مهم و اساسی آشنا بشیم.
اولویت استایل specificity در CSS
همونطور که بالاتر گفتم اگر برای یه عنصر توی CSS چند ویژگی مشابه تعریف کنیم، نهایتا یکی از اونها در خروجی نمایش داده میشه. این بخاطر وجود قوانین specificity هست که مشخص میکنه اولویت با کدوم کد هست. در حقیقت ما توی این جلسه یاد میگیریم که این سلسله مراتب به چه صورتی هست و چکار کنیم که کد مطلوب ما بدست بیاد. همچنین درک این قوانین بهمون میفهمونه که چرا بعضی از استایل دهی ها اعمال نمیشه.
ما ۴ تا دسته بندی کلی برای specificity ها داریم که اولویت استایل دهی را مشخص میکنند:
- استایل های داخلی Inline Style- این استایل دهی بالاترین اولویت رو داره و هر زمان که از این روش استفاده کنیم به روش های دیگه ارجحیت داره و نهایتا در خروجی اعمال میشه. ما در این روش با استفاده از صفت style در داخل تگ ها استایل ها رو تعریف میکردیم.
- IDها – آی دی ها دومین اولویت مهم هستند. اگر شما با استفاده از یک id برای یک تگ استایل تعریف کرده باشید دارای اولویت بالاتری نسبت به کلاس ها و استایل های تعریف شده با نام تگ هست.
- کلاس ها، صفت ها، شبه کلاس ها – ما در طول دوره با این موارد به خوبی آشنا شدیم. کلاس ها و انتخابگرهای صفات و همچنین سودو کلاسها دسته بعدی هستند که از اولویت برخوردارند. این گروه بعد از دو گروه قبلی (استایل های داخلی و آی دی ها) دارای اولویت بیشتری هستند.
- عناصر و شبه عناصر – این دسته کمترین اولویت رو نسبت به ۳ روه قبلی دارند. نام عناصر و سودو المنت ها، آخرین گروهی هستند که کد آنها اجرا میشه.
خب تا اینجا یاد گرفتیم که اولویت ها به چه صورت هست و کدوم دسته از استایل ها نهایتا اجرا میشن. حالا اگه دو تا استایل که عضو یه گروه هستند داشته باشیم چه اتفاقی میفته؟ مثلا تو دسته سوم که کلاسها و صفت ها و شبه کلاس ها با هم قرار دارند من برای مقدار پس زمینه را برای یک کلاس قرمز تعریف کردم و برای یک سودوکلاس آبی تعریف کردم. حالا هر دو رو به یه انتخاب نسبت دادم. توی ین وضعیت تکلیف چیه؟ یا اصلا برای تگ h1 در دوجای مختلف استایل دهی کردم. کدوم کد اجرا میشه؟
در اینجا اولویت با کدی است که در خط پایین تر قرار گرفته.
h1 {background-color: yellow;}
h1 {background-color: red;}
به عنوان مثال در نمونه کد بالا پس زمینه تگ h1 من توی خروجی قرمز دیده میشه و علتش این هست که این رنگ در خط پایینتری تعریف شده.
همینطور اگه در دو فایل css این استایل دهی ها انجام بشه اولویت بازهم با فایلی هست که دیرتر فراخوانی شده و طبیعتا پایینتر هست.
فراموش نکنید که عناصر در پایینترین لول از اولویت هستند. مثال زیر رو ببینید:
.h1{background-color: green;}
#h1{background-color: yellow;}
h1{background-color: red;}
حالا اگه در html کد زیر رو داشته باشم، پس زمینه h1 توی خروجی چه رنگی میشه؟
<h1 class="h1" id="h1">Mr. Ebi </h1>
اگه پاسخ شما رنگ زرد بود درست گفتید. هرچند در آخرین خط رنگ قرمز تعریف شده ولی اولویت اول با ID هست. فراموش نکنید تو گروه یکسان اولویت با خط پایین هست نه توی دو تا گروه متفاوت
تمام قوانین specificity به همین موارد محدود میشه و من توی ویدیوی این جلسه مثالهای متنوعی زدم و مقایسه های زیادی رو انجام دادم تا این موضوع کاملا جابیفته براتون.
