المحدّدات المتقدمة

مراجعة

تعلّمنا المحدّدات الأساسية (العنصر، .class، #id). هنا نتعمّق في محدّدات تمنحك دقّة وقوّة كبيرة.

الجامعات (Combinators) — العلاقات بين العناصر

div p     { }   /* نسل: كل p داخل div (على أي عمق) */
div > p   { }   /* ابن مباشر فقط */
div + p   { }   /* الشقيق المجاور التالي مباشرةً */
div ~ p   { }   /* كل الأشقّاء التالين */

الأصناف الزائفة (Pseudo-classes) — حالات العنصر

تستهدف العنصر في حالة معيّنة، تبدأ بنقطتين :

a:hover    { color: red; }      /* عند تمرير الماوس */
a:visited  { color: purple; }   /* رابط مزار */
input:focus { border-color: blue; } /* عند التركيز */
button:disabled { opacity: 0.5; }

محدّدات الترتيب (قويّة جدًا):

li:first-child  { }   /* أول عنصر */
li:last-child   { }   /* آخر عنصر */
li:nth-child(2) { }   /* العنصر الثاني */
li:nth-child(odd)  { } /* الفردية */
li:nth-child(even) { } /* الزوجية */

العناصر الزائفة (Pseudo-elements) — أجزاء من العنصر

تستهدف جزءًا من العنصر، تبدأ بنقطتين مزدوجتين ::

p::first-line   { font-weight: bold; }
p::first-letter { font-size: 2em; }
p::before { content: "👉 "; }   /* يُدرج محتوى قبل */
p::after  { content: " ✅"; }   /* يُدرج محتوى بعد */
::selection { background: yellow; } /* النص المحدّد */

🔑 ::before و::after يحتاجان دائمًا خاصية content (ولو فارغة "").

محدّدات السمات (Attribute Selectors)

تستهدف العناصر حسب سماتها:

input[type="text"]   { }   /* قيمة محدّدة */
a[target="_blank"]   { }
a[href^="https"]     { }   /* يبدأ بـ */
a[href$=".pdf"]      { }   /* ينتهي بـ */
a[href*="codefix"]   { }   /* يحتوي على */

الأخطاء الشائعة

• ❌ الخلط بين : و:: → الأصناف الزائفة نقطة واحدة، العناصر الزائفة نقطتان.
• ❌ نسيان content مع ::before/::after → لا يظهران.
• ❌ الإفراط في المحدّدات المعقّدة → يصعب صيانتها (راجع درس الأولوية).

خلاصة

استخدم الجامعات ( , >, +, ~) للعلاقات، والأصناف الزائفة (:hover, :nth-child) للحالات والترتيب، والعناصر الزائفة (::before, ::after) لأجزاء العنصر، ومحدّدات السمات ([type="..."]) للاستهداف الدقيق.