Theme
Primary Color
أكاديمية الزيرو

الدرس 14

تجميع المحددات باستخدام Grouping Selectors

يعني إيه Grouping Selectors

ال Grouping Selectors معناها نجمع أكتر من محدد 

علشان نطبق عليهم نفس التنسيق بدل ما نكتب نفس سطور التنسيق لكل واحد

مثال فيه تنسيق متكرر

حط العناصر دي مكان مثال التجربة

<h1>Learn CSS</h1>
<h2>Course Introduction</h2>
<p>Practice Every Day</p>
h1 {
  color: blue;
}

h2 {
  color: blue;
}

p {
  color: blue;
}

العناوين والفقرة كلهم باللون الأزرق لكن كتبنا نفس سطر التنسيق تلات مرات

نفس النتيجة باستخدام Grouping

استبدل الكود السابق بالمثال ده

h1,
h2,
p {
  color: blue;
}

جمعنا المحددات وفصلنا بينهم بعلامة الفاصلة, واسمها بالإنجليزي Comma 

كده سطور التنسيق داخل الأقواس بتتطبق على أي عنصر يطابق واحد من المحددات

لو غيرت blue إلى green العناصر التلاتة هيتغير لونهم من مكان واحد

محددات من أنواع مختلفة

ممكن تجمع اسم عنصر مع كلاس مع ID عادي

<h1>CSS Grouping</h1>
<p class="description">A Simple CSS Example</p>
<p id="welcome">Welcome To The Course</p>
<p>This Paragraph Keeps Its Default Color</p>
h1,
.description,
#welcome {
  color: green;
  font-size: 24px;
}

العنوان والفقرة صاحبة الكلاس description والفقرة صاحبة ID باسم welcome 

بياخدوا نفس اللون والحجم الفقرة الأخيرة مش مطابقة لأي محدد من التلاتة فمش هتاخد التنسيق ده

تنسيق مشترك وتنسيق خاص

نقدر نجمع الجزء المتكرر ونسيب لكل عنصر التنسيق الخاص بيه جرب المثال ده

<h1 class="page-title">My CSS Notes</h1>
<p class="page-description">Small Examples Make Learning Easier</p>
.page-title,
.page-description {
  color: blue;
}

.page-title {
  font-size: 36px;
}

.page-description {
  font-size: 20px;
}

اللون مشترك بينهم لكن كل واحد ليه حجم مختلف 

مش لازم كل تنسيقات العناصر تكون واحدة علشان نستخدم Grouping

الفاصلة جزء أساسي

السطر الجديد لوحده مش بيجمع المحددات لازم الفاصلة تكون بين كل محدد والتاني ومبنحطش فاصلة بعد آخر محدد قبل القوس

تقدر تكتب المحددات على سطر واحد برضه لكن كل محدد في سطر بيخلي القراءة أوضح لما العدد يزيد

h1, h2, p {
  color: blue;
}

جرب بنفسك

اعمل عنوان h2 وفقرتين بكلاسين مختلفين وخلي التلاتة بنفس اللون باستخدام Grouping 

ثم خلي لكل فقرة حجم خط مختلف من غير تكرار سطر اللون

آخر تعديل للدرس: