محدد الطفل مقابل محدد السليل في هياكل الجدول

عند تحديد العناصر في مستندات HTML، غالبا ما يستخدم المطورون محددات فرعية (>) للاستهداف توجيه الأطفال والمحددات التابعة لاستهداف أي عنصر متداخل. ومع ذلك، هناك سيناريوهات حيث يبدو أن المحدد الفرعي يفشل بشكل غير متوقع.

فكر في المثال التالي:

table tr td {
  background-color: red;
}

table > tr > td {
  background-color: blue;
}

نجحت القاعدة الأولى في تحديد جميع عناصر

ضمن عناصر ضمن عناصر . ومع ذلك، فإن القاعدة الثانية، التي تستخدم محدد الطفل (>)، تفشل في تحديد نمط أي عناصر ، والذي بدوره هو فرع من

. قد يفترض المطورون، في حيرة من أمرهم بسبب هذا السلوك، أنه بما أن	هو ابن لـ

، فيجب تطبيق المحدد الفرعي.

ينشأ الارتباك من التضمين الضمني لعنصر

في HTML. بشكل افتراضي، تقوم المتصفحات بإدراج عنصر ليحتوي على عناصر . ونتيجة لذلك، يصبح هيكل العنصر الفعلي:

في هذه البنية المعدلة، لم يعد

ابنًا مباشرًا لـ ، بل أصبح ابنًا لـ ، وهو في حد ذاته ابن لـ . لذلك، لا يمكن للمحدد > استهداف .

لتصحيح هذه المشكلة، يجب على المطورين تحديد عنصر tbody بشكل صريح:

table > tbody > tr > td {
  background-color: blue;
}

يضمن ذلك أن المحدد الفرعي يستهدف العنصر الصحيح في البنية المعدلة. بالإضافة إلى ذلك، إذا تمت إضافة عنصر tbody بشكل صريح إلى مستند HTML، فيمكن استخدام نفس المحدد.

نظرًا لأنه ليس تابعًا مباشرًا لـ