محدّدات CSS

---

تُستخدم محدّدات CSS (CSS Selectors) للعثور على عناصر HTML التي نريد تحديدها وتطبيق التنسيقات عليها.

يمكن تقسيم محدّدات CSS إلى خمس فئات رئيسية:

• المحدّدات البسيطة (Simple Selectors): تحدّد العناصر استنادًا إلى اسم العنصر أو المعرّف (id) أو الفئة (class).
• محدّدات العلاقات (Combinator Selectors): تحدّد العناصر بناءً على علاقة معيّنة تربط بينها.
• محدّدات الفئات الزائفة (Pseudo-class Selectors): تحدّد العناصر بناءً على حالة معيّنة، مثل مرور مؤشر الفأرة فوقها.
• محدّدات العناصر الزائفة (Pseudo-element Selectors): تستهدف جزءًا محدّدًا من العنصر لتنسيقه، مثل السطر الأول من فقرة.
• محدّدات السمات (Attribute Selectors): تحدّد العناصر بناءً على سمة معيّنة أو قيمة هذه السمة.

سنتعرّف في هذا الدرس على أبسط محدّدات CSS، مع أمثلة توضّح كيفية استخدامها.

---

محدّد العناصر في CSS

يُستخدم محدّد العناصر (Element Selector) لتحديد عناصر HTML استنادًا إلى اسم العنصر، بهدف تطبيق التنسيقات عليها.

على سبيل المثال، عند استخدام المحدّد p، ستُطبَّق التنسيقات على جميع عناصر الفقرات <p> في الصفحة.

---

محدّد المعرّف (id) في CSS

يستخدم محدّد المعرّف (ID Selector) السمة id الخاصة بعنصر HTML لتحديد عنصر معيّن وتطبيق التنسيقات عليه.

يجب أن يكون المعرّف id فريدًا داخل الصفحة، لذلك يُستخدم هذا المحدّد عادةً لاستهداف عنصر واحد بعينه.

لتحديد عنصر يحمل معرّفًا معيّنًا، اكتب علامة الهاش #، متبوعةً باسم المعرّف.

مثال:

إذا كان لدينا عنصر HTML بالمعرّف intro:

<p id="intro">هذه فقرة تجريبية.</p>

فيمكن تحديده في CSS كما يلي:

#intro {
    color: red;
    text-align: center;
}

في هذا المثال:

• #intro: يحدّد العنصر الذي يحمل المعرّف “id="intro.
• color: red;: يجعل لون النص أحمر.
• text-align: center;: يوسّط النص أفقيًا.

ملاحظة: يجب أن يكون المعرّف id فريدًا في الصفحة، بينما يمكن استخدام الفئة class مع عدة عناصر.

ملاحظة: لا يمكن أن يبدأ اسم المعرّف `id` برقم؛ بل يجب أن يبدأ بحرف أو بشرط مناسب وفق قواعد تسمية المعرّفات في HTML وCSS.

---

محدّد الفئات (class) في CSS

يُستخدم محدّد الفئات (Class Selector) لتحديد عناصر HTML التي تحمل قيمة معيّنة في السمة class، بهدف تطبيق التنسيقات عليها.

لتحديد العناصر التي تنتمي إلى فئة معيّنة، اكتب النقطة (.)، متبوعةً باسم الفئة.

مثال:

إذا أردنا تغيير لون جميع العناصر التي تنتمي إلى الفئة highlight، فيمكننا كتابة الشيفرة التالية:

<p class="highlight">هذه فقرة مميّزة.</p>
<h2 class="highlight">هذا عنوان مميّز.</h2>

.highlight {
    color: red;
}

في هذا المثال، سيصبح نص الفقرة والعنوان باللون الأحمر، لأن كليهما يحمل الفئة highlight.

ملاحظة: يمكن استخدام الفئة نفسها مع عدة عناصر HTML، بخلاف المعرّف id الذي يُفترض أن يكون فريدًا داخل الصفحة.

يمكنك أيضًا تحديد أنواع معيّنة من عناصر HTML لتطبيق التنسيقات عليها دون غيرها، حتى لو كانت عناصر أخرى تحمل الفئة نفسها.

على سبيل المثال، يمكنك استخدام محدّد الفئة مع اسم العنصر، بحيث تُطبَّق التنسيقات على الفقرات التي تحمل الفئة highlight فقط، دون التأثير في العناوين التي تحمل الفئة نفسها.

يمكن لعنصر HTML الواحد أن ينتمي إلى أكثر من فئة (class) في الوقت نفسه، وذلك بكتابة أسماء الفئات داخل السمة class، مع الفصل بينها بمسافات.

يتيح لك ذلك تطبيق مجموعة من التنسيقات على العنصر نفسه، بالاستفادة من قواعد CSS المرتبطة بكل فئة.

ملاحظة: لا يمكن أن يبدأ اسم الفئة `class` برقم، بل يجب أن يبدأ بحرف أو باستخدام صيغة تسمية صالحة وفق قواعد CSS.