مقاربات النوع CSS

اختيار الفرعي

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

في CSS1، يُطلق على هذا النوع من المحددات اسم محددات السياق (contextual selectors) بسبب اعتمادها على العلاقة السياقية للتطبيق أو تجنب تطبيق قاعدة معينة. في CSS2، يُسمى هذا النوع من المحددات اختيار الفرعي، ولكن مهما كان الاسم، فإن دوره متشابه.

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

على سبيل المثال، إذا كنت ترغب في جعل عناصر strong في القائمة نص كسور بدلاً من النص سميك العادي، يمكنك تعريف اختيار فرعي كما يلي:

li strong {
    font-style: italic;
    font-weight: normal;
  }

لاحظ العلاقة بين الكود الأزرق المميز بـ <strong>:

<p><strong>أنا نص سميك، وليس نص كسور، لأنني لست في القائمة، لذا لا ينطبق هذا القانون علي.</strong></p>
<ol>
<li><strong>أنا نص كسور. هذا بسبب أن عناصر strong موجودة داخل عناصر li.</strong></li>
<li>أنا نص عادي.</li>
</ol>

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

هيا لنرى القواعد CSS التالية:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

إليك HTML التي أثرت عليها:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>الكلمة التي تم تشديد التركيز عليها في هذا العنوان الفرعي هي<strong>blue</strong>.</h2>

المحتوى ذات الصلة

إذا كنت بحاجة إلى تعلم المزيد عن مقاربات النوع، يرجى قراءة المواد التالية في الدروس المتقدمة على CodeW3C.com: