🥸 يعني إيه 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;
}