الفصل 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;
}

Comments

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *