إنتقل إلى المحتوى الرئيسي

CSS مخصص ومحددات العناصر

صندوق CSS المخصص ومن خيار محدد CSS (CSS selector) يمنحانك تحكمًا يفوق القوالب الجاهزة: شكل أدق، وموضع جراحي داخل الصفحة. هذا الدليل للمتعدين الجادين، والبداية دائمًا من الأساسيات في مقال CSS المخصص.

لقطة شاشة توضيحية (ستُستبدل قريبًا)

الأداتان بين يديك​

الأداةماذا تفعلمتى تستخدمها
صندوق CSS المخصصتضيف أنماطًا فوق القالب المختارتعديل الألوان والمسافات والخطوط والظلال
محدد CSS للموضعتحدد نقطة الإدراج داخل بنية الصفحةوضع الويدجت في مكان لا توفره القوائم الجاهزة

ضبط الموضع عبر محدد CSS​

الموضع الافتراضي قبل الفوتر يناسب الأغلبية، لكن أحيانًا تريد الويدجت تحت وصف المنتج مثلًا أو بين قسمين محددين:

  1. من مكان ظهور الويدجت، اختر الوضع «مخصص عبر CSS».
  2. افتح متجرك في المتصفح، ثم أدوات المطور (F12) وحدد العنصر المرجعي.
  3. انسخ محددًا مستقرًا للعنصر، الأفضل معرف أو صنف فريد مثل #product-description أو .product-details.
  4. الصق المحدد في الحقل المخصص وحدد العلاقة: قبل العنصر أو بعده.
  5. احفظ، وعاين على الجوال وسطح المكتب قبل الاعتماد.
اختر محددات مستقرة

المحددات المولدة تلقائيًا (مثل div > div:nth-child(3)) تتكسر مع أي تحديث للقالب. استخدم دائمًا معرفات وأصنافًا ثابتة، وإن لم تجدها فالموضع الافتراضي أسلم.

أمثلة CSS جاهزة​

توسيط الويدجت وضبط عرضه​

.instafeed-widget {
  max-width: 1200px;
  margin-inline: auto;
}

تقليل المسافة حول الويدجت في صفحة المنتج​

.page-product .instafeed-widget {
  margin-block: 16px;
}

تكبير العنوان فقط دون بقية الويدجت​

.instafeed-widget .instafeed-title {
  font-size: 1.5rem;
  font-weight: 700;
}

الأصناف أعلاه أمثلة للنمط، تحقق من الأصناف الفعلية في متجرك من أدوات المطور، فالقوالب تختلف بين سلة وزد.

أفضل الممارسات​

  • طبّق على المحدد الصحيح: اصنع قواعدك داخل نطاق .instafeed-widget حتى لا تتسرب الأنماط لبقية المتجر.
  • تجنب !important إلا عند الضرورة: أول استخدام مقبول، تراكمه يعني أن الأنسب تعديل القالب نفسه.
  • اختبر الوضع الليلي والـ RTL: متجرك عربي، تأكد من الخصائص المنطقية مثل margin-inline بدل margin-left.
  • احتفظ بنسخة من CSS خارجيًا: الصندوق يحفظ آخر نسخة، لكن مرجعًا خارجيًا عند فريقك يسرّع استرجاع أي تعديل.

متى لا يكون CSS هو الحل؟​

ماذا بعد؟​

آخر تحديث في