in-range یک انتخابگر از نوع pseudo-class است که می توان از طریق آن عناصری که محدودیت دامنه مقادیرشان رعایت شده باشد را انتخاب کرد.
فقط عناصر فرمی که مقادیرشان باید در یک بازه خاص قرار بگیرند می توانند توسط این انتخابگر هدف قرار گرفته شوند. مثل عناصر input از نوع number و یا از نوع range که می توان برای مقادیرشان یک دامنه یا بازه تعریف کرد.
برای عنصر زیر فقط اعداد بین 10 تا 100 قابل قبول است:
<input type="number" min="10" max="100" value="33" >
از آنجایی که ارزش فعلی این عنصر 33 می باشد می توان توسط انتخابگر in-range انتخابش کرد:
input[type="number"]:in-range {
/* styles here */
}
مانند دیگر pseudo-classها می توان این انتخابگر را نیز با انتخابگرهای دیگر بصورت زنجیره ای استفاده کرد:
input:in-range:hover {
cursor: help;
}
همچنین اگر می خواهید زمانی که عنصر مقداری خارج از بازه مشخص شده دارد انتخابش کنید می توانید از انتخابگر out-of-range استفاده کنید.
در دموی زیر محدودیت اعداد بین 0 تا 10 است که با توجه به مقدار عنصر و استفاده از دو انتخابگر in-rangeو out-of-range استایل عنصر تغییر می کند.
See the Pen in-range/out-of-range by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
:in-range در کروم +10, فایرفاکس +28, سافاری, اپرا +11, اندروید و iOS پشتیبانی می شود.
اینترنت اکسپلورر فعلا از این انتخابگر پشتیبانی نمی کند.
جزییات باگ ها و پشتیبانی مرورگرهای مختلف در مورد این انتخابگر را می توانید اینجا بررسی کنید.
سوال داری؟ برو به پنل پرسش و پاسخ