اولویت (Specificity) در CSS
سلکتور نوشتن را بلدید. در stylesheet واقعی قوانین با هم برخورد می‌کنند: دو قانون یک عنصر و یک ویژگی را هدف می‌گیرند. مرورگر شانسی انتخاب نمی‌کند — به اولویت (specificity) نگاه می‌کند و اگر وزن‌ها برابر بود، به ترتیب نوشته شدن در فایل.
اولویت یعنی چه؟
اولویت وزنی است که مرورگر به سلکتور می‌دهد. وقتی قوانین تداخل دارند، برای همان ویژگی سلکتور سنگین‌تر برنده می‌شود. برای کار روزمره این نردبان را حفظ کنید: style خطی > id > class (و attribute / سودوکلاس) > element (و سودو‌المان). سلکتور * و خود ترکیب‌کننده‌ها به‌تنهایی وزن اضافه نمی‌کنند.
رتبه در یک نگاه
اول همین ترتیب را بشناسید. جزئیات بیشتری هست، ولی بیشتر گیج‌شدن‌های مبتدی با همین نردبان حل می‌شود.
📊 رتبهٔ اولویت CSS (روزمره)
| نوع | مثال | معمولاً بر چه چیزی می‌چربد |
|---|---|---|
| style خطی | style="color: red" |
تقریباً هر چیز داخل stylesheet |
| Id | #hero، #nav |
class و element |
| Class / attribute / سودوکلاس | .card، [type="email"]، :hover |
سلکتور element |
| Element / سودو‌المان | p، h1، ::before |
فقط قوانین ضعیف‌تر یا هم‌وزن (بعد ترتیب منبع) |
class از element قوی‌تر است
سلکتور تگ پهن است. class دقیق‌تر است — پس رنگ class برنده می‌شود. ترتیب فقط وقتی مهم است که وزن‌ها مساوی باشند.
class بر element می‌چربد
cssp {
color: #334155;
}
.note {
color: #0f766e;
}این تداخل را چطور بخوانیم؟
برای <p class="note"> هر دو قانون جور می‌شوند. .note از نوع class است؛ p از نوع element. class برنده است → متن فیروزه‌ای.
id از class قوی‌تر است
id از class سنگین‌تر است. برای ظاهر قابل‌استفادهٔ مجدد class را ترجیح بدهید؛ id را برای قلاب یکتا نگه دارید.
id بر class می‌چربد
css.note {
color: #0f766e;
}
#title {
color: #9f1239;
}چرا مهم است؟
اگر <h1 id="title" class="note"> زرشکی شد، id برده — نه به‌خاطر «احساس اهمیت»، بلکه به‌خاطر وزن بالاتر.
وزن برابر → قانون بعدی برنده است
وقتی دو قانون همان اولویت را دارند، آن‌که دیرتر در CSS آمده برای آن ویژگی برنده می‌شود.
وزن یکسان — ترتیب منبع تصمیم می‌گیرد
css.card {
border-color: #cbd5e1;
}
.card {
border-color: #0f766e;
}عادت در بن‌بست
هر دو سلکتور یک class هستند. قانون دوم .card برنده است → حاشیه فیروزه‌ای. اگر رنگ اول را می‌خواستید، ببینید سلکتور قوی‌تری هم جور نشده باشد.
ترکیب سلکتورها در عمل
سلکتورها ترکیب می‌شوند: nav a.button:hover از a لخت قوی‌تر است چون class و سودوکلاس اضافه کرده. لازم نیست برای هر خط ماشین‌حساب بیاورید — بپرسید: «id دارد؟ class اضافه؟ یا فقط تگ؟»
سلکتور ترکیبی بر element لخت می‌چربد
cssa {
color: #334155;
}
nav a.button {
color: #0f766e;
}دربارهٔ !important
!important می‌تواند اولویت معمولی را دور بزند. کپسول آتش‌نشانی است، نه ابزار هرروز. زیاد استفاده‌اش تغییر بعدی را سخت می‌کند. اول ساختار و سلکتور واضح‌تر را درست کنید.
عادت‌های خوب
- برای ظاهر روزمره class؛ id برای قلاب یکتا
- گیر کردید؟ ببینید هر سلکتور روی کدام پلهٔ نردبان است
- وزن برابر → قانون بعدی در فایل را چک کنید
- زنجیرهٔ خیلی بلند نسازید فقط برای «برد» — با عوض شدن HTML می‌شکند
!importantرا آخر بگذارید، نه اول
خودتان امتحان کنید
- صفحه‌ای با
<p class="note">سلام</p>،<h1 id="title" class="note">عنوان</h1>و<a class="button">برو</a>داخل<nav>بسازید. - جفت element در برابر class را بگذارید (
pخاکستری،.noteفیروزه‌ای) و ببینید پاراگراف note فیروزه‌ای است. #title { color: #9f1239; }را اضافه کنید — تیتر باید زرشکی شود حتی با.note.- دو قانون
.cardبرایborder-colorبنویسید و ببینید دومی برنده است. - اختیاری:
a { … }را باnav a.button { … }روی لینک داخل nav مقایسه کنید.
اشتباهات رایج
- فکر کردن که «تعداد declaration بیشتر» اولویت را بالا می‌برد — نمی‌برد
- فرض اینکه فایل آخر همیشه بر id می‌چربد — وزن بالاتر هنوز برنده است
#همهچیزیا!importantرا راه‌حل پیش‌فرض کردن- پله‌های نردبان را قاطی کردن (class با element یکی دانستن)
- فراموش کردن که وزن مساوی به ترتیب منبع برمی‌گردد
خلاصه
- اولویت می‌گوید در تداخل ویژگی، کدام قانون برنده است
- نردبان روزمره: inline > id > class/attribute/سودوکلاس > element/سودو‌المان
- وزن برابر → قانون بعدی
- برای ظاهر، class؛ id و
!importantکم - اول پلهٔ نردبان را بخوانید، بعد ترتیب
- با
p/.note/#titleتمرین کنید تا برنده واضح شود
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود