آرین تاپ لرن

تاریخ انتشار:۱۳:۲۳ ۱۴۰۰/۴/۱۹

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

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

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

سینتکس (نحو) 

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

 }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 :  20 px
 {
 } 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	تمام لینک هایی که ملاقات شده اند را انتخاب میکند

 

منبع:learnsource