الأسبقية (Specificity) في CSS
تعرف كتابة المحددات. في ورقة الأنماط الحقيقية تتصادم القواعد: قاعدتان تستهدفان نفس العنصر ونفس الخاصية. المتصفح لا يختار عشوائياً — ينظر إلى الأسبقية (specificity)، وإن تساوى الوزن ينظر إلى ترتيب الكتابة في الملف.
ما معنى الأسبقية؟
الأسبقية وزن يعطيه المتصفح للمحدد. عند التعارض، للمحدد الأثقل الغلبة على تلك الخاصية. للعمل اليومي احفظ هذا السلم: style مضمّن > id > class (وattribute / فئة زائفة) > element (وعنصر زائف). المحدد * والمركّبات نفسها لا تضيف وزناً وحدها.
الترتيب في لمحة
احفظ هذا الترتيب أولاً. هناك تفاصيل أكثر، لكن معظم حيرة المبتدئ تُحل بهذا السلم.
📊 ترتيب أسبقية CSS (يومي)
| النوع | أمثلة | غالباً يتفوق على |
|---|---|---|
| style مضمّن | style="color: red" |
تقريباً كل شيء في ورقة الأنماط |
| 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.
أخطاء شائعة
- ظن أن «المزيد من التصريحات» يرفع الأسبقية — لا
- افتراض أن الملف الأخير دائماً يهزم id — الوزن الأعلى ما زال يفوز
- جعل
#كل_شيءأو!importantالحل الافتراضي - خلط درجات السلم (معاملة class مثل element)
- نسيان أن الوزن المتساوي يعود لترتيب المصدر
ملخص
- الأسبقية تقرر من يفوز عند تعارض الخاصية
- السلم اليومي: inline > id > class/attribute/فئة زائفة > element/عنصر زائف
- وزن متساوٍ → القاعدة اللاحقة
- للمظهر class؛ id و
!importantنادران - اقرأ درجة السلم أولاً ثم الترتيب
- تدرب بـ
p/.note/#titleحتى يصير الفائز واضحاً
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى