آشنایی با سلکتورها در CSS - بخش چهارم

7 روز پیش
توسط میلاد آپدیت شد
محسن آستانه ( 12590 تجربه )
7 روز پیش
تخصص : عاشق طراحی وب و برنامه نویسی

3- CSS Pseudo Classes

CSS :checked Selector

checked:
تنظیم کردن مقدار ارتفاع و عرض عناصر input که اتریبیوت checked را در خود دارند:

CSS :checked Selector

CSS :disabled Selector

disabled:
تنظیم کردن رنگ پس زمینه برای تمام عناصر اینپوتی که تایپ آنها از نوع text می باشد به disabled:

CSS :disabled Selector

CSS :empty Selector

empty:
تعیین رنگ پس زمینه برای تگ پی که هیچ محتوایی ندارد:

CSS :empty Selector

CSS :enabled Selector

enabled:
تنظیم کردن رنگ پس زمینه برای تمام عناصر اینپوتی که تایپ آنها از نوع تکست می باشد به enabled:

CSS :enabled Selector

CSS :first-of-type Selector

first-of-type:
تعیین رنگ پس زمینه برای اولین عنصر پی در میان هم سطح های خود (سیبلینگ های خود):

CSS :first-of-type Selector

توجه داشته باشید که هم سطح بودن و سیبلینگ بودن در این سلکتور مهمترین عامل به شمار می رود! یعنی عنصر در میان هم سطح های خود انتخاب می شود و این تفاوت اصلی این سلکتور با سلکتور first-child: می باشد. سلکتور first-child: نسبت به والد خود سنجیده می شود و رابطه والد و فرزندی جریان دارد اما در این سلکتور رابطه خواهر برادری و یا همان سیبلینگ نقش مهم را ایفا می کند.

CSS :in-range Selector

in-range:
در مثال زیر اگر مقدار قرار داده شده در اینپوت بین دو بازه min و max باشد استایل به خوبی کار می کند. و اگر مقدار خارج از این بازه باشد استایل اعمال نخواهد شد:

CSS :in-range Selector

CSS :invalid Selector

invalid:
در این مثال اگر مقدار وارد شده در اینپوت با تایپ email نامعتبر باشد رنگ بوردر به قرمز تغییر خواهد کرد:

CSS :invalid Selector

میلاد ( 140060 تجربه )
7 روز پیش
تخصص : طراح رابط کاربری - Front-End

ممنونم، اینجور شبه کلاس ها و همینطور شبه عناصر، به نظر من کمتر شناخته شده هستند.
امیدوارم که همه ی موارد رو مدنظر داشته باشید و به نوبت توضیح بدین.
ممنون از مطالب تون

میلاد ( 140060 تجربه )
7 روز پیش
تخصص : طراح رابط کاربری - Front-End

پیوند به تمام شبه کلاس ها:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

پیوند به تمام شبه عناصر:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

اگر تونستید و ممکن بودش براتون، این موارد رو در نظر داشته باشید برای ادامه مباحث تون

برای ارسال پاسخ باید وارد سایت شوید