الحالات والعناصر الزائفة في CSS: nth-child و before و after

تعرفت في درس المحددات على :hover و :focus. هذه مجرد بداية. بالمحددات الزائفة تستطيع أن تلوّن الصفوف الزوجية في جدول، وتختار كل العناصر إلا واحداً، وتضيف علامة قبل كل عنوان، وكل ذلك دون أن تغيّر سطراً في HTML. في هذا الدرس ستتعلم أهمها.

الفرق بين النوعين

• الحالة الزائفة (Pseudo-class): تُكتب بنقطتين واحدة :، وتختار عنصراً موجوداً وهو في وضع معين أو ترتيب معين.
• العنصر الزائف (Pseudo-element): يُكتب بنقطتين مزدوجتين ::، ويختار جزءاً من العنصر، أو ينشئ جزءاً لم يكن موجوداً في HTML.

الاختيار بالترتيب

المحدد	يختار
:first-child	العنصر إذا كان أول أبناء أبيه
:last-child	العنصر إذا كان آخر أبناء أبيه
:nth-child(3)	العنصر الثالث
:nth-child(odd)	العناصر الفردية: الأول والثالث والخامس
:nth-child(even)	العناصر الزوجية: الثاني والرابع والسادس
:nth-child(3n)	كل ثالث عنصر: الثالث والسادس والتاسع

/* تخطيط الجدول: صف بلون وصف بلون */
tr:nth-child(even) {
  background: #f2f2f7;
}

/* خط فاصل تحت كل عنصر ما عدا الأخير */
li {
  border-bottom: 1px solid #ddd;
}
li:last-child {
  border-bottom: none;
}

تخيّل طابور الصباح: المعلم يقول «الطالب الأول يتقدم»، أو «كل طالب ترتيبه زوجي يخطو خطوة». هو لا يعرف أسماءهم، بل يختارهم بمواقعهم. وهكذا تعمل هذه المحددات.

الاستثناء: not

:not() تختار كل العناصر إلا ما يطابق المحدد الذي بين القوسين:

/* كل الأزرار إلا الزر الأساسي */
button:not(.primary) {
  background: #e6e8f0;
}

/* مثال الخط الفاصل السابق في قاعدة واحدة */
li:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

حالات النماذج

المحدد	متى ينطبق؟
:checked	مربع اختيار أو زر radio مُحدَّد
:disabled	حقل أو زر معطّل
:required	حقل إجباري
:invalid	حقل قيمته لا تطابق شروطه
:placeholder-shown	حقل ما زال يعرض النص التوضيحي، أي أنه فارغ

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input:invalid {
  border-color: crimson;
}

هذه الحالات تجعل النموذج يخبر المستخدم بما يحدث، بلا JavaScript.

حالات الروابط والتفاعل

المحدد	متى ينطبق؟
:hover	الفأرة فوق العنصر
:active	لحظة الضغط على العنصر
:focus-visible	العنصر محدَّد بلوحة المفاتيح
:visited	رابط زاره المستخدم من قبل

hover لا تكفي وحدها

شاشات اللمس ليس فيها فأرة، فلا تجعل معلومة مهمة تظهر عند :hover فقط. واكتب معها :focus-visible دائماً لمستخدم لوحة المفاتيح.

العنصران before و after

::before و ::after ينشئان عنصراً وهمياً داخل العنصر: الأول قبل محتواه، والثاني بعده. ومحتواه يأتي من الخاصية content.

.required::after {
  content: " *";
  color: crimson;
}

.external::after {
  content: " ↗";
}

النجمة الحمراء تظهر بعد كل عنوان حقل إجباري، والسهم يظهر بعد كل رابط خارجي. ولم نكتب أياً منهما في HTML.

content إلزامية

بدون الخاصية content لا يُنشأ العنصر الوهمي أصلاً. إذا أردته شكلاً بلا نص فاكتب content: "".

ويُستخدمان كثيراً لرسم أشكال تزيينية، مثل خط ملون تحت العنوان:

h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 8px;
  background: #5b5bf0;
  border-radius: 2px;
}

ضع فيهما التزيين فقط. النص المهم مكانه HTML، لأن بعض قارئات الشاشة لا تقرأ محتوى content، ولأن الزائر لا يستطيع تحديده ونسخه.

عناصر زائفة أخرى

المحدد	يختار
::first-letter	الحرف الأول من الفقرة
::first-line	السطر الأول منها
::placeholder	النص التوضيحي داخل الحقل
::selection	النص الذي ظلله المستخدم بالفأرة
::marker	نقطة أو رقم عنصر القائمة

li::marker {
  color: #5b5bf0;
}

::selection {
  background: #fde68a;
}

جرّب بنفسك

غيّر even إلى odd ثم إلى 3n وشاهد الصفوف الملونة. ثم علّم مربع الاختيار وراقب النص الذي بجانبه، وظلل أي نص بالفأرة:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: sans-serif; } h2::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 6px; background: #5b5bf0; } li { padding: 6px; } li:nth-child(even) { background: #ececff; } li:first-child { font-weight: bold; } li::marker { color: crimson; } input:checked + span { text-decoration: line-through; color: green; } .external::after { content: " ↗"; } ::selection { background: #fde68a; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

المحدد input:checked + span يجمع حالة زائفة مع رمز + الذي يختار العنصر التالي مباشرة: «العنصر span الذي يأتي بعد مربع مُحدَّد».

أخطاء شائعة

• نسيان content: العنصر ::before أو ::after لا يظهر مهما كتبت له من تنسيق.
• سوء فهم nth-child: p:nth-child(2) لا تعني «الفقرة الثانية»، بل «العنصر الذي هو الابن الثاني لأبيه وهو فقرة». إذا كان الابن الثاني عنواناً فلن يُختار شيء. للفقرة الثانية بين الفقرات استخدم p:nth-of-type(2).
• مسافة قبل النقطتين: li :first-child بمسافة تعني «أول ابن داخل li»، وهذا معنى مختلف تماماً عن li:first-child.
• نص مهم داخل content: لا يُحدَّد ولا يُنسخ، وقد لا يُقرأ.

اختبر نفسك

سؤال

أي محدد يلوّن الصفوف الثاني والرابع والسادس من الجدول؟

tr:nth-child(2)tr:nth-child(even)tr:nth-child(odd)

سؤال

كتبت تنسيقاً كاملاً للمحدد .box::before ولم يظهر شيء. ما السبب الأرجح؟

يجب كتابة :before بنقطتين واحدةالعناصر الزائفة لا تعمل مع الكلاساتنسيت الخاصية content

الخلاصة

• الحالة الزائفة : تختار عنصراً موجوداً في وضع أو ترتيب معين.
• :nth-child تختار بالترتيب: رقم، أو odd، أو even، أو صيغة مثل 3n.
• :not() تستثني، و :checked و :disabled و :invalid لحالات النماذج.
• ::before و ::after ينشئان عنصراً تزيينياً، ويشترطان content.
• اترك النص المهم في HTML، والتزيين في العناصر الزائفة.