الدرس الثاني: أنواع المحددات (Selectors) في CSS

في هذا الدرس، سنتعلم أنواع المحددات (Selectors) التي تُستخدم لتحديد العناصر التي نريد تطبيق الأنماط عليها في CSS. المحددات هي الأساس في كتابة أي قاعدة CSS، وهي تساعد على اختيار العناصر بشكل دقيق.

1. محدد العنصر (Element Selector)

يُستخدم لتطبيق الأنماط على جميع العناصر من نفس النوع. على سبيل المثال، إذا أردت تنسيق جميع الفقرات `<p>` أو جميع العناوين `<h1>`.

مثال:

css

 
  p {
    color: blue;
}

هذا الكود سيجعل كل الفقرات في الصفحة تظهر باللون الأزرق.

2. محدد الفئة (Class Selector)

يُستخدم لتطبيق الأنماط على عناصر معينة باستخدام الفئة (class). نضيف الفئة للعناصر في HTML باستخدام السمة `class`، ونستدعيها في CSS بوضع نقطة (`.`) قبل اسم الفئة.

مثال:

html

  
 <p class="important">هذا نص مهم</p>
<p>هذا نص عادي</p>

    

وفي ملف CSS:

css

  
 .important {
    color: red;
    font-weight: bold;
}

    

في هذا المثال، الفقرة ذات الفئة "important" ستظهر باللون الأحمر مع خط غامق.

3. محدد المعرف (ID Selector)

يُستخدم لتطبيق الأنماط على عنصر واحد فقط باستخدام المعرف (ID). يُعتبر المعرف فريدًا في الصفحة ويجب ألا يُستخدم إلا مع عنصر واحد. نضيف المعرف في HTML باستخدام السمة `id`، ونستدعيه في CSS بوضع علامة المربع (`#`) قبل اسم المعرف.

مثال:

html

  
  <p id="special">هذا نص مميز</p>

    

وفي ملف CSS:

css

  
  #special {
    color: green;
    font-size: 24px;
}

    

هذا سيجعل الفقرة التي تحتوي على المعرف "special" تظهر باللون الأخضر وبحجم خط 24 بكسل.

4. محدد المجموعات (Group Selector)

يُستخدم لتطبيق نفس الأنماط على مجموعة من العناصر. نفصل العناصر باستخدام الفاصلة (`,`).

مثال:

css

  
 h1, h2, p {
    color: purple;
}

    

هذا سيجعل جميع العناوين `<h1>` و `<h2>` والفقرات `<p>` تظهر باللون الأرجواني.

5. محدد النسل (Descendant Selector)

يُستخدم لتطبيق الأنماط على العناصر التي تكون داخل عنصر آخر (نسلها). في هذا النوع من المحددات، نكتب المحدد الأب متبوعًا بالمحدد الابن بدون فاصل.

مثال:

html

  
  <div>
    <p>هذا نص داخل div</p>
</div>
<p>هذا نص خارج div</p>

    

وفي ملف CSS:

css

  
 div p {
    color: orange;
}

    

سيؤثر هذا النمط فقط على الفقرة الموجودة داخل العنصر `<div>`.

6. محدد الطفل المباشر (Child Selector)

يُستخدم لتطبيق الأنماط فقط على الأطفال المباشرين لعنصر معين. نستخدم علامة `>` بين المحددات.

مثال:

html

  
 <div>
    <p>نص 1</p>
    <div>
        <p>نص 2</p>
    </div>
</div>

    

وفي ملف CSS:

css

div > p {
    color: brown;
}

    

هذا سيؤثر فقط على الفقرة "نص 1"، لأنه الطفل المباشر للعنصر `<div>`.

الواجب:

1. جرب استخدام أنواع مختلفة من المحددات في ملفات HTML وCSS الخاصة بك.
2. حاول تطبيق أنماط مختلفة مثل الألوان والأحجام على العناصر باستخدام الفئات والمعرفات.