شبه کلاس ها در CSS

یک شبه کلاس(Pseudo-classes) برای تعریف یک وضعیت خاص از یک عنصر استفاده میشود. در این فصل با انواع شبه کلاس ها آشنا خواهیم شد.


یک شبه کلاس برای تعریف یک وضعیت خاص از یک عنصر استفاده میشود.

برای مثال شبه کلاس ها میتواننند در موارد زیر استفاده شوند :

  • فرمت بندی یک عنصر زمانی که موس کاربر روی آن قرار میگیرد
  • فرمت بندی متفاوت لینک های ملاقات شده و ملاقات نشده 
  • فرمت بندی یک عنصر وقتی فوکوس روی آن قرار میگیرد

سینتکس (نحو) 

سینتکس یک شبه کلاس به صورت زیر است :

selector:pseudo-class {
    property:value;
}

شبه کلاس ها برای حالت های مختلف یک لینک

لینک ها میتوانند به روش های مختلفی نشان داده شوند :

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}
خودتان امتحان کنید

نکته : a:hover به منظور اثر گذاری در تعاریف CSS باید بعد از a:link و a:visited بیاید! a:active نیز برای اثر گذاری باید بعد از a:hover قرار بگیرد. شبه کلاس ها حساس به حروف کوچ و بزرگ نیستند.


شبه کلاس ها و کلاس ها در CSS

شبه کلاس ها میتوانند با کلاس ها در CSS ترکیب شوند.

در مثال زیر وقتی  موس را روی لینک مشخص شده میبرید، رنگ آن تغییر خواهد کرد :

a.highlight:hover {
    color: #ff0000;
}
خودتان امتحان کنید

شبه کلاس hover: برای <div>

یک مثال استفاده از شبه کلاس hover: روی یک عنصر <div> در زیر آمده است :

div:hover {
    background-color: blue;
}
خودتان امتحان کنید

در نمونه مثال زیر نیز با قرار گرفتن نشانگر موس بر روی یک عنصر <div> یک عنصر <p> همچون یک تول تیپ نمایش پیدا میکند :

p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}
خودتان امتحان کنید

شبه کلاس first-child:

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

در نمونه مثال زیر هر عنصر که اولین فرزند از هر عنصری باشد انتخاب میشود و رنگ آن به آبی تغییر خواهد کرد.

p:first-child {
    color: blue;
}
خودتان امتحان کنید

مشخص کردن اولین عنصر <i> در تمام عناصر <p>

در نمونه مثال زیر، selector مشخص شده اولین عنصر <i> در هر عنصر <p> را انتخاب میکند :

p i:first-child {
    color: blue;
}
خودتان امتحان کنید

مشخص کردن تمام عناصر <i> در تمام عناصر <p> که اولین فرزند هستند

در نمونه مثال زیر، selector مشخص شده تمام عناصر <i> که در عناصر <p> هستند و خود آن عناصر <p> اولین فرزند دیگر عناصر هستند را انتخاب میکند :

p:first-child i {
    color: blue;
}
خودتان امتحان کنید

تمام شبه کلاس ها در CSS

   selector    مثال    توضیح مثال
   active:    a:active    لینک های فعال را انتخاب میکند
   checked:    input:checked    تمام عناصر <input> که خاصیت checked آنها true باشد را انتخاب میکند
   disabled:    input:disabled    تمام عناصر <input> که غیر فعال باشند را انتخاب میکند
   empty:    p:empty    هر عنصر <p> که دارای فرزندی نباشد را انتخاب میکند
   enabled:    input:enabled    تمام عناصر <input> که فعال باشند را انتخاب میکند
   first-child:    p:first-child    هر عنصر <p> که اولین فرزند پدر خود باشد را انتخاب میکند
   first-of-type:    p:first-of-type    هر عنصر <p> که اولین عنصر <p> از عنصر پدر خود باشد را انتخاب میکند
   focus:    input:focus    هر عنصر <input> که دارای فوکوس باشد را انتخاب میکند
   hover:    a:hover    تمام لینک هایی که موس روی آنها قرار میگیرد را انتخاب میکند
   in-range:    input:in-range    تمام عناصر <input> که دارای مقادیری در یک رنج مشخص هستند را انتخاب میکند
   invalid:    input:invalid    تمام عناصر <input> که دارای مقادیر غیر قابل قبول هستند را انتخاب میکند
   (lang(language:    (p:lang(it    تمام عناصر <p> را که مقدار صفت lang آنها با مقدار it شروع شود را انتخاب میکند
   last-child:    p:last-child    تمام عناصر <p> که آخرین فرزند پدر خود باشند را انتخاب میکند
   last-of-type:    p:last-of-type    تمام عناصر <p> که آخرین عنصر <p> از عنصر پدر خود باشند را انتخاب میکند
   link:    a:link    تمام لینک های ملاقات نشده را انتخاب میکند
   (not(selector:    (not(p:    تمام عناصر را به غیر از عنصر <p> انتخاب میکند
   (nth-child(n:    (p:nth-child(2    هر عنصر <p> که دومین فرزند پدر خود باشد را انتخاب میکند
   (nth-last-child(n:    (p:nth-last-child(2    هر عنصر <p> که دومین فرزند پدر خود از آخر باشد زا انتخاب میکند
   (nth-last-of-type(n:    (p:nth-last-of-type(2    هر عنصر <p> که از آخر دومین عنصر <p> از عنصر پدر خود باشد را مشخص میکند
   (nth-of-type(n:    (p:nth-of-type(2    هر عنصر <p> را که دومین عنصر <p> از عنصر پدر خود باشد انتخاب میکند
   only-of-type:    p:only-of-type    هر عنصر <p> که تنها عنصر <p> از عنصر پدر خود باشد را انتخاب میکند
   only-child:    p:only-child    هر عنصر <p> که تنها فرزند پدر خود باشد را انتخاب میکند
   optional:    input:optional    هر عنصر <input> که صفت "required" نداشته باشد را انتخاب میکند
   out-of-range:    input:out-of-range    هر عنصر <input> که دارای مقادیری خارج از مقدار مشخص شده داشته باشد را انتخاب میکند
   read-only:    input:read-only    هر عنصر <input> که دارای صفت "readonly" باشد را انتخاب میکند
   read-write:    input:read-write    هر عنصر <input> که صفت "readonly" نداشته باشد را انتخاب میکند
   required:    input:required    هر عنصر <input> که دارای صفت "required" باشد را انتخاب میکند
   root:    root    عنصر ریشه ی سند را مشخص میکند
   valid:    input:valid    هر عنصر <input> که دارای مقدار معتبر باشد را انتخاب میکند
   visited:    a:visited    تمام لینک هایی که ملاقات شده اند را انتخاب میکند

 

منتشر شده در ۲۷ شهریور ۱۳۹۶ حمید رضا ملکی ۵۶۴ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده