عناصر التصميم بناءً على عناصر الطفل في CSS

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

بناء الجملة لـ ": HAS" هو كما يلي: div: HAS أنماط }

div:has(child-element) {
  styles
}

باستخدام ": HAS" pseudo-class ، يمكننا تحديد أنماط لعنصر الأصل استنادًا إلى عناصر الطفل التي يحتوي عليها. على سبيل المثال: div: has (div.a) { الحدود: الصلبة 3 بكسل أحمر. } DIV: HAS (DIV.B) { الحدود: الصلبة 3 بكسل أزرق. }

في هذا الرمز ، تستهدف القاعدة الأولى أي عنصر "div" الذي يحتوي على عنصر طفل مع الفصل "A" ويضيف حدًا أحمر إليه. وبالمثل ، تطبق القاعدة الثانية حدود زرقاء على عناصر "div" التي تحتوي على عنصر طفل مع الفصل "ب." من خلال الاستفادة من ": HAS" ، يمكن للمطورين تعزيز مرونة وتعبير أنماط CSS الخاصة بهم.