این آموزش در تاریخ ۱۴۰۰/۱۰/۱۴ آپدیت شده است.
آموزش شبه کلاس invalid در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس invalid در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس invalid در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) invalid در CSS میتوان برای عناصری که دارای مقدار نامعتبر می باشند، استایل دلخواه تعریف کرد.
این شبه کلاس فقط بروی عناصر ورودی که دارای محدودیت محتوایی می باشند کار میکند، مثلا بروی عنصر ورودی از نوع ایمیل یا عناصری ورودی که دارای صفت min و max می باشند.
با استفاده از شبه کلاس valid نیز میتوان عناصری را که مقدارشون معتبر می باشد انتخاب و بهشون استایل داد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس invalid در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده در Input از نوع Email ( ایمیل )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> input[type="email"]:invalid { border: 2px solid black; background-color:red; color:#fff; } input[type="email"]:valid { border: 3px solid black; background-color:#8AC007; color:#fff; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس invalid در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| invalid: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:invalid { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- این شبه کلاس فقط بروی Input هایی که دارای محدودیت محتوایی می باشند کار میکند، مثلا اینپوت از نوع ایمیل ( همانند مثال شماره ۱ ) یا Input هایی که دارای صفت min و max ( مثه اینپوت Number و.. ) می باشند.
