عرض مصدر CSS/:focus-within

<noinclude>{{DISPLAYTITLE: الصنف <code dir="ltr">:focus-within</code>}}</noinclude>
الصنف الزائف <code>‎:focus-within</code> في CSS (أي pseudo-class) يُمثِّل عنصرًا (مثل عناصر النماذج) التي استقبل التركيز (foucs) أو احتوى على عنصر قد استقبل التركيز، أي أنَّ هذا الصنف الزائف يُمثِّل عنصرًا مُطابَقًا عبر الصنف الزائف <code>[[CSS/:focus|‎:focus]]</code> أو كان أحد أبنائه مُطابَقًا عبر عبر الصنف الزائف <code>[[CSS/:focus|‎:focus]]</code>.<syntaxhighlight lang="css">
div:focus-within {
  background: cyan;
}
</syntaxhighlight>هذا المُحدِّد مفيد جدًا، إذا يمكن تنسيق كامل النموذج <code>[[HTML/form|<form>]]</code> عندما يُركِّز المستخدم على أحد عناصر <code>[[HTML/input|<input>]]</code>.

الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
:focus
</syntaxhighlight>

== أمثلة ==
لاحظ كيف سيتغير تنسيق العنصر <code>[[HTML/form|<form>]]</code> عندما يستقبل التركيز أحد عناصر <code>[[HTML/input|<input>]]</code> فيه:
<syntaxhighlight lang="html">
<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>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

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

input {
  margin: 4px;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|60
|52.0
|غير مدعومة
|47
|10.1
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo Selectors Level 4].
[[تصنيف:CSS]]
[[تصنيف:CSS Selectors]]
[[تصنيف:CSS pseudo-class]]