سلام رفقا! 👋 امیدوارم حالتون عالی باشه. توی جلسه قبلی کلی چیز باحال یاد گرفتیم و حالا وقتشه بریم سراغ مبحث اولویت (Specificity) در CSS.

تا حالا شده کلی کد CSS بنویسی، ولی ببینی یه استایل خاص روی یه عنصری اعمال نمی‌شه؟ 🤔 یا مثلاً دو تا قانون مختلف برای یه عنصر تعریف کردی و موندی کدومشون اجرا می‌شه؟ دقیقاً همین‌جاست که بحث شیرین اولویت در CSS وارد می‌شه. فهمیدن این موضوع کلید حل خیلی از مشکلات استایل‌دهی و نوشتن یه کد CSS تمیز و قابل پیش‌بینیه.

پس اگه آماده‌ای بفهمی مرورگر چطوری تصمیم می‌گیره کدوم استایل رو به کدوم عنصر بده و چطوری می‌تونی این تصمیم رو به نفع خودت تغییر بدی، بزن بریم! 😉

نحوه اولویت بندی عناصر در CSS 🤔

فرض کن توی یه مهمونی، چند نفر دارن به یه نفر دستور می‌دن که چیکار کنه. یه نفر دوست صمیمیشه، یه نفر رئیسشه، یه نفرم فقط یه آشنای دوره. به نظرت حرف کدومشون بیشتر برو داره؟ احتمالاً رئیسش، بعد دوست صمیمیش، و در آخر اون آشنای دور، درسته؟

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

توی دنیای CSS هم دقیقاً همین‌طوره! وقتی چند تا قانون CSS مختلف می‌خوان روی یه عنصر HTML تأثیر بذارن، مرورگر گیج نمی‌شه. اون یه سری قوانین مشخص برای اولویت‌بندی داره و می‌دونه حرف کدوم قانون رو باید گوش کنه. به این قوانین می‌گن قوانین آبشاری و اولویت (Cascade and Specificity).

به‌طور خلاصه، مرورگر برای اینکه تصمیم بگیره کدوم استایل نهایتاً روی یک عنصر اعمال بشه، چند تا فاکتور رو به ترتیب بررسی می‌کنه:

1. اهمیت (Importance): آیا از !important استفاده شده؟ (بعداً کامل توضیحش می‌دم)
2. اولویت (Specificity): کدوم سلکتور (Selector) دقیق‌تر و خاص‌تره؟
3. ترتیب کدها (Source Order): اگه اولویت‌ها برابر بود، کدی که پایین‌تر نوشته شده (یا دیرتر خونده شده) برنده می‌شه.

نحوه محاسبه اولویت یک تگ در CSS

مرورگر برای هر کد CSS ای که می‌نویسی، یه جور امتیاز قدرت یا اولویت در نظر می‌گیره. هر چی این امتیاز بالاتر باشه، اون بخش قلدرتره و حرفش به کرسی می‌شینه.

بیا ببینیم این سطح‌های قدرت یا اولویت‌ها چی هستن، از قوی‌ترینشون شروع می‌کنیم تا برسیم به ضعیف‌ترین:

• اولویت اول: استایل‌های درون‌خطی (Inline Styles): یادت میاد که می‌تونستیم مستقیماً توی تگ HTML و با استفاده از style، استایل بدیم؟ دقیقا مثل کد زیر:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

این نوع استایل بالاترین اولویت رو داره (به جز !important). و در اولویت اول قرار میگیره.

• اولویت دوم: شناسه‌های منحصر به فرد (IDs): اینا همون سلکتورهایی هستن که با علامت # شروع می‌شن، مثلاً #header یا #user-profile. چون هر ID توی کل صفحه HTML باید فقط و فقط برای یه عنصر استفاده بشه (یعنی تک و یونیک باشه)، CSS هم حساب ویژه‌ای روشون باز می‌کنه و بهشون اولویت خیلی بالایی می‌ده. 💪 قدرت‌شون خیلی زیاده، ولی یه کوچولو از استایل‌های درون‌خطی کمتره.

• اولویت سوم: کلاس‌ها، ویژگی‌ها و شبه‌کلاس‌ها (Classes, Attributes, Pseudo-classes)
  • کلاس‌ها: همون‌هایی که با نقطه (.) شروع می‌شن، مثل .button, .card, .highlight می‌تونی یه کلاس رو به چندین عنصر بدی.
  • سلکتورهای ویژگی (Attribute): اونایی که با کروشه [] میان و بر اساس ویژگی‌های یه تگ استایل می‌دن، مثل [type="text"] (همه input هایی که نوعشون text هست) یا [href^="https://"] (همه لینک‌هایی که به https شروع می‌شن).
  • شبه‌کلاس‌ها (Pseudo-classes): اینا وضعیت‌های خاص یه عنصر رو هدف می‌گیرن، مثل :hover (وقتی ماوس می‌ره روی عنصر)، :focus (وقتی روی عنصر کلیک یا تب می‌کنی)، :nth-child(2) (دومین فرزند).

این گروه سومین سطح اولویت رو دارن. قدرتشون از ID ها کمتره ولی از اسم خود تگ‌ها خیلی بیشتره. ✨

• اولویت چهارم: اسم تگ‌ها و شبه‌عناصر (Elements, Pseudo-elements)

و بالاخره می‌رسیم به پایه ترین سطح اولویت! اینا شامل:

• اسم خودِ تگ‌های HTML: مثل p, div, h1, a, img و… . وقتی فقط اسم تگ رو می‌نویسی، داری خیلی کلی استایل می‌دی.
• شبه‌عناصر (Pseudo-elements): اونایی که با دوتا دو نقطه (::) شروع می‌شن و یه قسمت خاص از عنصر رو هدف می‌گیرن، مثل ::before (قبل از محتوای عنصر)، ::after (بعد از محتوای عنصر)، ::first-line (خط اول یه پاراگراف). این دسته کمترین اولویت رو دارن.

بزار یه مثال بزنم که مطلب حسابی برات جا بیفته. فرض کن داری یه دکمه طراحی می‌کنی:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

و استایل‌هات اینجورین:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

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

• button: یه عنصر، پس کمترین الولیت رو خواهد داشت.
• .btn-cool: یه کلاس، اولویت دوم خواهد بود
• #container button: یه شناسه + یه عنصر، این گزینه بالاترین اولویت رو خواهد داشت

واضحه که #container button بالاترین اولویت رو خواهد داشت و رنگ پس‌زمینه نارنجی می‌شه.

دستور !important در CSS

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

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

حالا اگه تگت این باشه:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

با اینکه استایل اینلاین اولویت بیشتری نسبت به تگ p داره، ولی !important میاد و می‌گه: “بی‌خیال اولویت بشو، من می‌گم آبی!” و رنگ متن آبی می‌شه. اما یه هشدار: از !important زیاد استفاده نکن، چون اگه همه جا ازش بزنی، کدت شلوغ می‌شه و دیگه نمی‌فهمی چی به چیه! فقط تو موقعیت‌های خاص و ضروری برو سراغش.

فوت کوزه‌ گری و چند تا نکته تکمیلی!✨

حالا که اولویت رو خوب یاد گرفتی، چند تا نکته باحال دیگه هم برات دارم که کارتو راحت‌تر کنه:

• در اولیت های برابر، قانون آخر برنده : فرض کن دو تا قانون نوشتی که اولویت یا همون امتیازشون دقیقاً یکیه. مثلاً هر دو فقط اسم یه تگ رو هدف گرفتن. اینجا تکلیف چیه؟ 🤔 خیلی ساده‌ست! CSS اونی رو انتخاب می‌کنه که آخرین بار خونده باشه. یعنی اونی که توی فایل CSS تو پایین‌تر نوشته شده، برنده‌ست. به این می‌گن قانون آبشاری (Cascade). مثلاً:

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجا چون هر دو قانون فقط تگ p رو هدف گرفتن، اولویت جفتشون یکسانه (فقط یه امتیاز توی بخش عناصر می‌گیرن). ولی چون قانون دوم (قرمز) بعد از قانون اول (آبی) اومده، رنگ پاراگراف‌های تو قرمز می‌شه! ❤️ پس یادت باشه، توی نبرد اولویت های برابر، اون قانونی که آخری نوشته شده، برنده می‌شه!

• سلکتور ستاره (*): سلکتور ستاره (*) که همه چی رو انتخاب می‌کنه، یادت هست؟ جالبه بدونی که این سلکتور هیچ اولویتی نداره و کم ترین سطح قدرت رو داره.

🚀 چند توصیه دوستانه برای کدزنی بهتر:

• تا می‌تونی از !important دوری کن: واقعاً سعی کن فقط در مواقع اضطراری سراغش بری. به جاش سعی کن با سلکتورهای دقیق‌تر کارت رو راه بندازی.
• عاشق کلاس‌ها باش: کلاس‌ها انعطاف‌پذیری بیشتری نسبت به ID ها دارن. ID ها چون اولویت خیلی بالایی دارن، ممکنه بعداً کارت رو برای تغییر استایل سخت کنن. بیشتر از کلاس‌ها استفاده کن.
• نه خیلی خاص، نه خیلی عمومی: سعی کن سلکتورهات دقیقاً همون چیزی که می‌خوای رو هدف بگیرن. نه اونقدر کلی بنویس که روی چیزای ناخواسته هم تأثیر بذاره، نه اونقدر پیچیده و تودرتو که بعداً خودتم گیج بشی!
• کدهات رو مرتب نگه دار: یه فایل CSS مرتب و خوانا، پیدا کردن و ویرایش قوانین اولویت رو خیلی راحت‌تر می‌کنه.

جمع‌بندی: حالا دیگه استادی!

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

این مقاله رو با کلی عشق برات نوشتم تا هم یاد بگیری، هم لذت ببری. امیدوارم تو پروژه‌هات ازش استفاده کنی و همیشه بدرخشی! 🌟 موفق باشی، قهرمان طراحی وب 👽💗

جلسه 21 آموزش CSS: عناصر Block و Inline در CSS

مطالعه

جلسه 5 آموزش CSS: انتخابگرها یا Selectors در CSS (بخش دوم)

مطالعه

جلسه 14 آموزش CSS: ویژگی Outline در CSS

مطالعه