الفصل 3: السليكتورز في CSS | يعني نختار العناصر إزاي؟

---

🥸 يعني إيه Selectors؟

ببساطة كده، السليكتور هو اللي بتقول بيه للمتصفح:

“اسمع يا عم، لو لقيت العنصر ده، ظبطه كذا وكذا”.

زي لما تقول:

cssCopy codep {
  color: red;
}

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

---

💣 أنواع السليكتورز اللي هتحتاجها طول حياتك:

---

1. 🏷️ سليكتور التاج (Tag Selector)

يعني تظبط كل العناصر من نوع معين، زي كل العناوين أو كل البراجرافات.

cssCopy codeh1 {
  color: blue;
}

يعني كل <h1> في الموقع هيبقى لونه أزرق.

---

2. 🆔 سليكتور الـ ID

بتستخدمه لما تكون عايز تظبط عنصر واحد بس، مميز وفريد.

htmlCopy code<p id="hero">أهلا بيك</p>

cssCopy code#hero {
  font-size: 24px;
}

شايف العلامة #؟ دي معناها “أنا شغال على ID”.

⛔ خُد بالك: الـ ID مينفعش يتكرر، عامل زي رقمك القومي كده.

---

3. 👕 سليكتور الـ Class

ده بقى اللي بنعتمد عليه 90% من الوقت. تقدر تستخدمه على كذا عنصر.

htmlCopy code<p class="highlight">نص مميز</p>
<p class="highlight">وده كمان</p>

cssCopy code.highlight {
  background-color: yellow;
}

⏺️ شايف النقطة .؟ بتقول: “ده كلاس”.

---

4. 🌳 سليكتور العنصر جوه عنصر تاني (Descendant)

يعني: لو فيه عنصر جوه عنصر تاني، إشتغل عليه.

cssCopy code.card p {
  color: green;
}

يعني: أي <p> جوه كلاس اسمه card، خليه لونه أخضر.

---

5. 📦 تجميع السليكتورز مع بعض (Grouping)

يعني بدل ما تكتب نفس التنسيق كذا مرة، اجمعهم في سطر واحد:

cssCopy codeh1, h2, p {
  font-family: Arial;
}

---

6. 🌀 السليكتور العام (Universal Selector)

يعني: “يالا نشتغل على كل اللي في الصفحة”.

cssCopy code* {
  margin: 0;
  padding: 0;
}

ينضفلك الصفحة كده من غير لخبطة.

---

7. 👶 ابن مباشر (Child Selector)

يعني: “هاتلي العنصر اللي جاي مباشر تحت ده”.

cssCopy code.card > p {
  color: red;
}

بس ده هيشتغل على <p> اللي تحت card على طول، مش اللي جوه جوه.

---

8. 🔂 أخوه اللي بعده على طول (Adjacent Sibling)

cssCopy codeh2 + p {
  color: orange;
}

يعني أي <p> جاي بعد <h2> على طول، ظبطه.

---

9. 🤜 كل الأخوات اللي بعده (General Sibling)

cssCopy codeh2 ~ p {
  color: purple;
}

أي <p> جاي بعد <h2> على نفس المستوى، شغال عليه.

---

💥 المقارنة الجدعنة بين ID و Class:

الحتة دي	ID (#)	Class (.)
بيتكرر؟	لأ	آه
للعنصر الواحد؟	تمام	ممكن أكتر من عنصر
أستخدمه إمتى؟	لحاجات مميزة	في كل حتة تقريبا

---

🛠️ تمرين جدعنة:

htmlCopy code<div class="card">
  <h2 id="main-title">عنوان رئيسي</h2>
  <p class="desc">ده وصف صغير</p>
</div>

cssCopy code#main-title {
  color: red;
}

.desc {
  font-style: italic;
}

.card p {
  background-color: #f0f0f0;
}