الصنف :focus-within
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الصنف الزائف :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.