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

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