المحددات

١ثلاثة محددات أساسية

المحدِّد يجيب عن سؤال: أي العناصر نريد تنسيقها؟

<h1 id="title">قائمة بُنّ</h1><p>قهوة عربية <span class="price">8 ريال</span></p><p class="special">قهوة اليوم <span class="price">12 ريال</span></p><p>شاي <span class="price">5 ريال</span></p>

/* 1) بالوسم: كل الفقرات */p {  font-size: 18px;} /* 2) بالصنف class: كل عنصر صنفه price */.price {  color: #2E8B3A;  font-weight: bold;} /* 3) بالمعرّف id: عنصر واحد فقط */#title {  color: #E07A1F;}

انتبه: النقطة . للصنف، وعلامة # للمعرّف، في CSS فقط. أما في HTML فنكتب الاسم بلا علامة.

٢أكثر من صنف، وتجميع المحددات

<button class="btn">إلغاء</button><button class="btn primary">احجز</button><h2>عنوان</h2><h3>عنوان فرعي</h3>

.btn {  padding: 8px 16px;  border-radius: 8px;}.primary {  background: #1D5FB4;  color: white;}/* محددات مجمّعة بفاصلة */h2, h3 {  color: #3B2A1A;}

• العنصر يحمل أكثر من صنف بمسافة بينها: class="btn primary"، فيأخذ تنسيق الصنفين.
• الفاصلة تطبّق القاعدة نفسها على أكثر من محدِّد: h2, h3.

٣العنصر داخل العنصر

المسافة بين محدِّدين تعني «داخل». nav a تختار الروابط التي داخل nav فقط:

<nav>  <a href="#">الرئيسية</a>  <a href="#">القائمة</a></nav><p>اقرأ <a href="#">الشروط</a>.</p>

nav a {  background: #3B2A1A;  color: white;  padding: 4px 10px;  text-decoration: none;}

٤حالات العنصر: hover وغيرها

بعد النقطتين نكتب حالة العنصر. أشهرها :hover: حين يمر مؤشر الفأرة فوقه:

<button>مرّر الفأرة فوقي</button><ul>  <li>الأول</li>  <li>الثاني</li>  <li>الثالث</li></ul>

button:hover {  background: #E07A1F;  color: white;}li:first-child {  font-weight: bold;}

٥من الأقوى؟

إذا اختار محددان العنصر نفسه بقيمتين مختلفتين، يفوز الأدق:

<p id="note" class="info">ما لوني؟</p>

#note { color: green; }.info { color: blue; }p     { color: red; }

الترتيب من الأقوى: المعرّف #id ثم الصنف .class ثم الوسم p. وعند التساوي يفوز المكتوب أخيرًا. لذلك ظهر النص أخضر رغم أن قاعدة p مكتوبة آخرًا.

نصيحة عملية: نسّق بالأصناف في أغلب الأحوال؛ فهي قابلة للتكرار، وقوتها متوسطة فلا تصعّب التعديل لاحقًا.