المحددات النسدية لـ CSS

نصيحة الخيار الذريعة (descendant selector) تُعرف أيضًا باسم خيار التضمين.

يمكن لاختيار الأبناء اختيار العناصر التي هي حفيدات لعدة عناصر.

اختيار العناصر بناءً على السياق

يمكننا تعريف اختيار الأبناء لإنشاء بعض القواعد، مما يجعل هذه القواعد تعمل في بنية معينة للوثيقة وليس في بنية أخرى.

على سبيل المثال، إذا كنت ترغب في تطبيق النمط فقط على العناصر em الموجودة في h1، يمكنك كتابة ما يلي:

h1 em {color:red;}

سيقوم هذا القانون بتغيير نص العناصر em التي هي حفيد لـ h1 إلى اللون الأحمر. لن يتم اختيار نص العناصر em الأخرى (مثل النص في الفقرة أو الإقتباسات الكبيرة) من قبل هذا القانون:

<h1>هذا عنوان مهم</h1>
<p>هذا فقرة مهمة.</p>

جرب بنفسك

بالطبع، يمكنك أيضًا وضع خاصية الفئة على كل عنصر em الموجود في h1، ولكن من الواضح أن اختيار الأبناء أكثر كفاءة.

توضيح الجملة

في اختيار الأبناء، يحتوي الجانب الأيسر من القاعدة على اثنين أو أكثر من اختياراء مفصولة بمسافات. المسافة بين الخيارات هي وحدة التكامل (combinator). يمكن تفسير كل وحدة تكامل كـ "... في ... العثور على"، "... كجزء من ..."، "... كحفيد لـ ..."، ولكن يجب قراءتها من اليمين إلى اليسار.

لذلك، يمكن تفسير اختيار h1 em كـ "أي عنصر em هو حفيد لـ h1". إذا كنت ترغب في قراءة اختيار المطور، يمكنك تغيير القول إلى ما يلي:

التطبيق العملي

وظيفة اختيار الأبناء قوية للغاية. بفضلها، يمكن تحقيق المهام التي لا يمكن تحقيقها في HTML.

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

الحل هو استخدام اختيار الأبناء. في هذه الحالة، يمكن تحديد خاصية الفئة sidebar لل div الذي يحتوي على الشريط الجانبي ويتم تعيين قيمة خاصية الفئة للمحتوى الرئيسي كـ maincontent. ثم كتابة النمط التالي:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

هناك جانب سهل التغاضي في المحددات النسدية، وهو أن الفجوة بين العنصرين يمكن أن تكون غير محدودة.

على سبيل المثال، إذا كتب ul em، فإن هذا الجملة سيختار جميع عناصر em التي تورثها عناصر ul، بغض النظر عن مستوى التداخل.

لذلك، ul em سيختار جميع عناصر em الموجودة في العلامات التالية:

<ul>
  <li>عنصر القائمة 1</li>
    <ol>
      <li>عنصر القائمة 1-1</li>
      <li>عنصر القائمة 1-2</li>
      <li>عنصر القائمة 1-3</li>
        <ol>
          <li>عنصر القائمة 1-3-1</li>
          <li>عنصر القائمة</li> <em>1-3-2</em></li>
          <li>عنصر القائمة 1-3-3</li>
        </ol>
      </li>
      <li>عنصر القائمة 1-4</li>
    </ol>
  </li>
  <li>عنصر القائمة 2</li>
  <li>عنصر القائمة 3</li>
</ul>

جرب بنفسك