شرح CSS Selectors الأساسية مع أمثلة وأولوية التنسيق Specificity

شرح CSS Selectors الأساسية وأولوية التنسيق Specificity

CSS Selectors هي الأداة اللي بتسمح لنا نستهدف عناصر HTML لتطبيق التنسيقات عليها. في هذا المقال هنشرح الأنواع الأساسية للـ selectors زي ما هي موضحة في W3Schools: Element, ID, Class, Universal, Grouping selectors. وبعدها هنضيف جزء مهم جدًا عن أولوية التنسيق CSS Specificity اللي بيحدد أي تنسيق يتم تطبيقه لو في أكثر من قاعدة تنطبق على نفس العنصر.

1. Element Selector

الـ Element selector بيختار كل العناصر من نفس النوع. على سبيل المثال لو كتبنا:

p {
  text-align: center;
  color: red;
}

فكل عناصر <p> هتبقى باللون الأحمر ومتوسّطة في الصفحة.

2. ID Selector

الـ ID selector بيستهدف عنصر واحد محدد باستخدام خاصية id. مثال:

#para1 {
  text-align: center;
  color: blue;
}

ده هيأثر فقط على العنصر اللي عنده id="para1".

3. Class Selector

الـ Class selector بيستهدف عناصر متعددة تشترك في نفس الـ class. على سبيل المثال:

.center {
  text-align: center;
  color: green;
}

هنا أي عنصر عنده class="center" هيتطبق عليه التنسيق ده.

4. Universal Selector

الـ Universal selector بيتم كتابته كـ *، وهو بيحدد كل العناصر في الصفحة:

* {
  color: blue;
}

الكود ده بيغير لون النص لكل العناصر إلى الأزرق.

5. Grouping Selector

الـ Grouping selector بيسمحلك تجمع أكثر من selector وتديهم نفس التنسيق. مثال:

h1, h2, p {
  text-align: center;
  color: red;
}

في هذا المثال العناصر <h1> و<h2> و<p> هياخدوا نفس التنسيقات.

6. أولوية التنسيق (CSS Specificity)

في بعض الأحيان نفس العنصر بيكون عليه أكتر من قاعدة CSS. في الحالة دي المتصفح بيحدد أي قاعدة لها الأولوية. القاعدة العامة للأولوية كالتالي:

Inline styles (مكتوبة مباشرة داخل العنصر) لها أعلى أولوية.
ID selectors بتيجي بعد كده في القوة.
Class selectors وكمان attribute selectors وpseudo-classes لهم أولوية أقل من الـ ID لكن أعلى من العناصر.
Element selectors زي p وh1 أقلهم أولوية.

مثال عملي:

<p id="para1" class="center">Hello CSS</p>

p { color: red; }
.center { color: green; }
#para1 { color: blue; }

في هذا المثال اللون النهائي للنص هيكون أزرق لأن الـ ID له أولوية أعلى من الـ Class أو الـ Element.

الخاتمة

CSS Selectors هي العمود الفقري لتنسيق الصفحات. في هذا المقال تعرفنا على الأنواع الأساسية (Element, ID, Class, Universal, Grouping)، وفهمنا أولوية التنسيق Specificity. فهم هذه المفاهيم بيمنحك تحكم كامل في تصميم صفحات الويب بشكل منظم واحترافي.