الصنف :focus-within

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث
الصنف الزائف ‎:focus-within في CSS (أي pseudo-class) يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز، أي أنَّ هذا الصنف الزائف يُمثِّل عنصرًا مُطابَقًا عبر الصنف الزائف ‎:focus أو كان أحد أبنائه مُطابَقًا عبر عبر الصنف الزائف ‎:focus.
div:focus-within {
  background: cyan;
}
هذا المُحدِّد مفيد جدًا، إذا يمكن تنسيق كامل النموذج <form> عندما يُركِّز المستخدم على أحد عناصر <input>. الشكل العام لهذا المحدد:
:focus

أمثلة

لاحظ كيف سيتغير تنسيق العنصر <form> عندما يستقبل التركيز أحد عناصر <input> فيه:

<p>Try typing into this form.</p>

<form>
  <label for="given_name">Given Name:</label>
  <input id="given_name" type="text">
  <br>
  <label for="family_name">Family Name:</label>
  <input id="family_name" type="text">
</form>
شيفرة CSS:
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 60 52.0 غير مدعومة 47 10.1

مصادر ومواصفات