CSS/:focus-within

الصنف الزائف ‎: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

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

• مسودة Selectors Level 4.