عرض مصدر CSS/:out-of-range

<noinclude>{{DISPLAYTITLE: الصنف <code>‎:out-of-range</code>}}</noinclude>
الصنف الزائف <code>‎:out-of-range</code> في CSS (أي pseudo-class) يُمثِّل أيّة عناصر <code>[[HTML/input|<input>]]</code> التي لا تكون قيمتها ضمن المجال المسموح المُحدَّد عبر الخاصيتين <code>min</code> و <code>max</code>.
<syntaxhighlight lang="css">
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
</syntaxhighlight>هذا المُحدِّد مفيد لإعطاء المستخدم دلالةً بصريةً على أنَّ القيمة الحالية للحقل خارج الحدود المسموحة. لاحظ أنَّ هذا الصنف الزائف يُطبَّق على العناصر التي يمكن أن نُحدِّد مجال القيم التي تقبلها.

الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
:out-of-range
</syntaxhighlight>

== أمثلة ==
مثال عن استخدام الصنف الزائف <code>‎:out-of-range</code> والصنف الزائف <code>‎[[CSS/:in-range|:in-range]]</code> لإعطاء دلالة بصرية على أنَّ قيمة الحقل ضمن الحدود المسموحة:<syntaxhighlight lang="html">
<form action="" id="form1">
  <ul>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|10.0
|29.0
|غير مدعومة
|11.0
|5.2
|}
متصفح Edge يدعم هذا الصنف الزائف على النقيض من متصفح IE.

==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/scripting.html#selector-out-of-range HTML Living Standard].
*مسودة [https://drafts.csswg.org/selectors-4/#out-of-range-pseudo Selectors Level 4].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]