المحدِّدات (Selectors)

أنواع المحدِّدات الأساسية

/* 1. حسب نوع العنصر */
p {
  color: gray;
}

/* 2. حسب الكلاس (class) — يبدأ بنقطة . */
.highlight {
  background: yellow;
}

/* 3. حسب المعرّف (id) — يبدأ بمربّع # */
#main-title {
  font-size: 40px;
}

نستخدمها في HTML هكذا:

<p class="highlight">فقرة مميّزة</p>
<h1 id="main-title">العنوان</h1>

class أم id؟

💡 القاعدة العملية: استخدم class في معظم الأحيان.

محدِّدات مدمجة

/* كل <p> داخل عنصر بكلاس card */
.card p {
  margin: 8px;
}

/* عند مرور الفأرة */
button:hover {
  background: #b026ff;
}

🎯 التالي: الألوان والخلفيات.