تحديد العنصر الأب باستخدام CSS

To select a parent element using only CSS, you can use the :has() pseudo-class, but please note that this pseudo-class is not currently supported in most browsers. Alternatively, you can use the general sibling combinator ~ to select the label that comes after the checked input. Here’s how you can achieve that:

cssCopy code
/* Select the label that follows the checked input */
input:checked ~ label {
  /* CSS styles here */
}

However, if you need to select the parent of the checked input, CSS alone cannot do that. You might need to use JavaScript for such a scenario.

في CSS، لا يمكنك اختيار العنصر الأب مباشرة باستخدام محدد. يمكنك استخدام المحددات المتاحة لتحديد العناصر الشقيقة أو الابنة ولكن ليس الآب مباشرة.

في مثالك، إذا كنت تحتاج إلى تحديد العنصر الأب لعنصر المحدد، فإن CSS وحده لا يمكن أن يفعل ذلك. يمكنك استخدام JavaScript لتحقيق هذا الهدف، على سبيل المثال، باستخدام jQuery يمكنك القيام بشيء مماثل لهذا:

javascriptCopy code
$('input:checked').parent('label').addClass('selected');

في هذا المثال، إذا تم اختيار ، سيتم إضافة فئة “selected” إلى العنصر الأب لهذا ال .

ومن الجدير بالذكر أن تحديد العناصر الأب مباشرة في CSS قد تكون إما غير مدعومة بواسطة المتصفحات أو قيد النقاش في المواصفات القادمة، وذلك بسبب تحديد العناصر الأب يتطلب الوصول إلى العناصر الشقيقة التي لا يمكن الوصول إليها بواسطة محدد CSS فقط.