مُحددات CSS

مُحددات CSS

المُحددات هي جوهر CSS — وظيفتها "تحديد" عناصر HTML التي تريد تنسيقها. CSS يوفر أنواعاً متعددة من المُحددات، من مُحددات العلامات البسيطة إلى تركيبات المُحددات المعقدة، مما يمنحك تحكماً دقيقاً في أي عنصر.

المُحددات الأساسية

1. مُحدد العلامة (مُحدد العنصر)

يستخدم أسماء علامات HTML مباشرة كمُحددات، مطابقاً جميع العلامات بنفس الاسم في المستند.

/* جميع عناصر <p> تصبح حمراء */
p {
  color: red;
}

/* جميع عناصر <h1> تصبح زرقاء */
h1 {
  color: blue;
}

/* جميع عناصر <div> تحصل على حد */
div {
  border: 1px solid black;
}

2. مُحدد الفئة

يطابق العناصر حسب سمة class. أسماء الفئات تبدأ بنقطة ..

/* جميع العناصر التي تحمل class="highlight" */
.highlight {
  background-color: yellow;
}

/* فقط عناصر <p> التي تحمل class="center" */
p.center {
  text-align: center;
}

عناصر HTML يمكن أن تحتوي على فئات متعددة، مفصولة بمسافات:

<p class="highlight center">هذا النص مميز ومحاذاة للوسط</p>

3. مُحدد المعرف

يُطابق العناصر بسمة id، مُسبوقة بهاش #.

/* تحديد العنصر ذو id="header" */
#header {
  background-color: #333;
  color: white;
}

ملاحظة: المعرف يمكن أن يظهر مرة واحدة فقط في كل صفحة. مُحددات المعرف تُستخدم عادةً للعناصر الفريدة.

4. المُحدد الشامل

يستخدم نجمة * لمطابقة جميع العناصر في المستند.

/* إعادة تعيين الهوامش والحشو لجميع العناصر */
* {
  margin: 0;
  padding: 0;
}

المُحدد الشامل مريح، لكن انتبه للأداء — إذا طُبقت أنماط معقدة، فقد تؤثر على سرعة عرض الصفحة.

تفصيل المُحدد

عندما تُطبق مُحددات متعددة على نفس العنصر، يستخدم المتصفح قواعد التفصيل لتحديد أي نمط يعمل:

الأولوية من الأعلى إلى الأقل:

أنماط مضمنة > مُحددات معرف > مُحددات فئة > مُحددات علامة

مثال حساب التفصيل

/* تفصيل: 0001 */
p {
  color: black;
}

/* تفصيل: 0010 */
.text {
  color: blue;
}

/* تفصيل: 0100 */
#special {
  color: green;
}

/* تفصيل: 0011 (فئة + علامة) */
p.text {
  color: red;
}

لنفس العنصر <p class="text" id="special">، سيكون لون النص النهائي أخضر (مُحدد المعرف له أعلى تفصيل).

!important

CSS يوفر "سلاحاً نووياً" — !important — يُجبر نمطاً على الحصول على أعلى أولوية:

p {
  color: red !important;
}

لا تستخدم !important إلا عند الضرورة القصوى — تُصعب تصحيح الأنماط. اعطِ الأولوية لحل المشكلات بزيادة تفصيل المُحدد.

أفضل الممارسات للمُحددات

1. استخدم مُحددات الفئة كثيراً: الفئات قابلة لإعادة الاستخدام والمُحدد الأكثر مرونة
2. استخدم مُحددات المعرف بحذر: المعرفات فريدة، صعبة إعادة الاستخدام، وتفصيلها العالي قد يُسبب مشاكل التجاوز
3. تجنب التحديد المفرط: div.container ul li a محدد جداً؛ .nav-link يكفي
4. حافظ على إيجاز المُحددات: المُحددات الأطول أصعب في الصيانة وتؤثر على الأداء

❓ أسئلة شائعة

📖 ملخص

• المُحددات هي مهارة CSS الأساسية — إتقان مُحددات العلامة والفئة والمعرف يغطي معظم احتياجات التنسيق
• فهم تفصيل المُحدد يساعد على تجنب الارتباك بشأن "لماذا نمطي لا يعمل"
• في الممارسة، مُحددات الفئة تُستخدم بشكل متكرر — فضّل التنسيق القائم على الفئات

📝 تمارين

1. أنشئ صفحة HTML تحتوي على عناوين وفقرات وقوائم.
2. استخدم مُحددات العلامة لتعيين لون النص لجميع الفقرات.
3. استخدم مُحددات الفئة لتعيين ألوان خلفية مختلفة لعناصر محددة (حدد فئتين مختلفتين على الأقل).
4. استخدم مُحددات المعرف لأنماط خاصة لعنصر واحد في الصفحة.
5. اختبر: طبّق مُحددات العلامة والفئة والمعرف على نفس العنصر وراقب أيها له أعلى أولوية.