نلقي نظرة في هذا المقال على محددات تُدعى محددات التجميع أو الضم combinators، فهي تجمع بين محددات أخرى بطريقة تُرسي نوعًا من العلاقية المفيدة فيما بينها وبين أماكن توزع المحتوى في الصفحة.
ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية:
- أساسيات عمل الحاسوب
- تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب
- أساسيات التعامل مع الملفات
- فكرة عن أساسيات HTML
- فكرة عن أساسيات عمل لغة CSS
محددات العناصر السليلة
تُمثَّل مجمعات العناصر السليلة descendant combinator عادة بمسافة فارغة واحدة " " وتجمع محددين وفق آلية اختيار العناصر التي يطابقها المحدد الثاني إن كان لها عناصر سَلَف (أب مباشر أو أب لأب مباشر أو أب لأب لأب مباشر وهكذا) يطابقها المحدد الأول. تُدعى المحددات التي تستخدم مجمعات العناصر السليلة بمحددات العناصر السليلة.
body article p
نطابق في المثال التالي فقط العناصر <p> الموجودة داخل عنصر يمتلك الصنف box.:
محددات الأبناء المباشرين
تُوضع إشارة مجمعات الأبناء المباشرين child combinator والتي تمثل < بين محددي CSS، وتطابق فقط العناصر التي يختارها المحدد الثاني إن كانت أبناءً مباشرين للعناصر التي يختارها المحدد الأول. لن تُختار بالطبع العناصر إن لم تكن من الأبناء المباشرين. فلو أردنا فقط اختيار عناصر <p> التي تُمثِّل أبناءً مباشرين للعناصر <article> مثلًا سيكون الضم كالتالي:
article > p
لدينا في المثال التالي قائمة غير مرتبة ضمنها قائمة مرتبة. سنستخدم محدد العناصر السليلة لاختيار عناصر القائمة <li> التي تمثِّل أبناء مباشرين للقائمة غير المرتبة <ul> ونحيطها بإطار يظهر منه الحد العلوي.
إن أزلت الإشارة التي تدل على محدد الأبناء المباشرين، سينتهي بك المطاف إلى محدد العناصر السليلة وسيظهر الإطار السابق حول جميع عناصر القائمة <li>.
محددات الأخوة المتجاورين
توضع إشارة محدد الأخوة المتجاورين adjacent sibling selector والتي تمثل + بين محددي لغة CSS وتطابق فقط العناصر التي يختارها المحدد الثاني إن كان أيًا منه الأخ التالي مباشرة للعناصر التي يختارها المحدد الأول. فلو أردنا مثلًا أن نختار فقط كل الصور <img> التي يليها مباشرة العنصر <p>، نستخدم محدد الأشقاء المتجاورين التالي:
p + img
إنّ أكثر الاستخدامات شيوعًا لهذا المحدد هي اختيار فقرة نصية بعد عنوان كما في المثال التالي. إذ يبحث المحدد في هذا المثال عن أي فقرة نصية تشترك بعنصر أب يمثّل عنوانًا من المستوى الأول <h1> وتأتي بعده مباشرة.
لو أدرجت أي عنصر آخر مثل <h2> بين <p> و<h1> فلن يُطابق المحدد أي فقرة نصية، ولن يُطبق التنسيق على لوني الخط والخلفية عندما يتجاور العنصران.
محددات العناصر الأخوة
يُستخدم محدد العناصر الأخوة general sibling combinator والذي يمثل ~ لاختيار أية أشقاء لعنصر حتى لو لم تجاوره. فلاختيار جميع الصور <img> التي تأتي في أي مكان بعد فقرة نصية <p> نستخدم المحدد التالي:
p ~ img
نختار في المثال التالي جميع الفقرات النصية <p> التي تأتي بعد العنوان <h1>. ولاحظ أنه على الرغم من وجود العنصر <div> في الشيفرة فسيختار المحدد الفقرة النصية <p> التي تأتي بعده طالما أنها بعد العنوان <h1> أيضًا.
استخدام محددات التجميع
يمكنك الدمج بين أيٍّ من المحددات التي تعرفنا عليها سابقًا ومحددات التجميع لانتقاء جزء من الملف. فلو أردنا مثلًا أن نختار عناصر قوائم تمتلك الصنف "a" والتي تمثل أبناءً مباشرين لقائمة غير مرتبة <ul> بإمكاننا استخدام المحدد التالي:
ul > li[class="a"] { }
وعليك الانتباه عندما تُنشئ قوائم طويلة من المحددات لاستهداف قسم محدد جدًا من الصفحة، فمن الصعب إعادة استخدام هذا المحدد لأنه خاص جدًا بعنصر معين ضمن شيفرة معينة.
من الأفضل غالبًا إنشاء صنف محدد وتطبيقه على العنصر الذي تريد استهدافه بالتحديد. وبما أننا تطرقنا إلى هذه الفكرة، لا بدّ من الإشارة إلى أن معرفتك بمحددات التجميع ستفيدك جدًا إن احتجت الوصول إلى مكان في صفحتك ولم تكن قادرًا على الوصول إلى شيفرة HTML الخاصة بها لأسباب قد تتعلق بأنظمة إدارة المحتوى CMS مثلًا.
يمكنك الرجوع إلى صفحة محددات CSS في موسوعة للاطلاع على القائمة الكاملة بالتفصيل.
ترجمة -وبتصرف- للمقال Combinators.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.