معرفی شِبه کلاس و 8 شِبه کلاس کاربردی در css که به ما در انتخاب المان ها و اعمال استایل ها در css کمک میکنند

به نام خدا

در این مقاله قصد داریم که ابتدا مفهوم شِبه کلاس و سپس 8 شبه کلاس (Pseudo Classes) معرفی کنیم که به شما در انتخاب و اعمال استایل ها و تغییرات به المان ها در css کمک میکند و تا حدی  وابستگی به جاوااسکریپت را کم میکند

شبه کلاس یا همان Pseudo Classes چیست؟

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

برای مثال : وقتی بر روی یک المان (تگ)  کلیک میشود و یا اینکه موس بر روی المان میرود (hover میشود) و... ، استایل های خاصی را

به آن المان اضافه کن

نحوه استفاده 

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

(به جای pseudo ، شبه کلاس مورد نظر نوشته میشود)

.selector:pseudo{
	/* styles */
}

برای درک بهتر میتوانید به سایت w3schools مراجعه کنید

6 شبه کلاس کاربردی

1 - hover

این شبه کلاس در زمانی اجرا و استفاده میشود که کاربر موس را روی المان مورد نظر ببرد.

مثال:

.box:hover{
	background: #000;
}

(در این مثال گفتیم که وقتی کابر موس را بر روی المانی با کلاس box برد ، بکگراند آن را سیاه کن).

2 - visited

این شبه کلاس برای این است که وقتی کاربر از یک لینک دیدن کرد، به عبارتی آن لینک را visit کرد، استایل هایی را به آن بده.

برای مثال تگ های a در html که برای لینک هستند بصورت دیفالت نوشته های آن ها به رنگ آبی هستند و ما میخواهیم تعریف

 کنیم که اگر کاربر از آن لینک دیدن کرد رنگ نوشته آن تگ a ، سیاه شوند:

a:visited{
	color: #000;
}

3 - active

این شبه کلاس برای زمانی است که کاربر بر روی المان کلیک میکند و کلیک را بر روی المان مورد نظر نگه میدارد

مثال:

#selector:active{
	/* styles */
}

4 - out-of-range

برای input هایی استفاده میشود که ورودی آنها داری رنج ورودی است.

برای مثلا یک input داریم که از نوع number است و min آن 10، و max آن 50 است یعنی کاربر باید اعدادی را در

این input وارد کند که بالای 10 و پایین 50 هستند و اگر عدد کاربر در این رنج نباشد ، استایل های این شبه کلاس 

بر روی المان مورد نظر اجرا و اعمال میشوند:

input:out-of-range{
	border-color: red;
}

(برای مثال گفتیم که رنگ border آن را قرمز کن)

5 - blank

برای input ها است و وقتی مقدار آن input خالی باشد، استایل ها را اعمال میکند

مثال:

input:blank{
	background: red;
}

6 - read-only

برای انتخاب المان هایی است که کاربر توانایی ایجاد تغییر در آن ها را ندارد.

مثال:

:read-only{
	color: blue;
}

نکته : بعضی از شبه کلاس ها به سلکت المان ها نیازی ندارند (مانند همین read-only)

7 - checked

برای input ها از نوع checkbox استفاده میشود.

برای مثال یک checkbox داریم که میخواهیم وقتی checked شد ، اندازه اش 1.5 برابر شود:

#myCheck:checked{
	transform: scale(1.5);
}

8 - focus

وقتی کاربر وارد یک input برای نوشتن چیزی میشود، و یا بر روی دکمه ای کلیک میکند، درواقع بر روی آن focus نیز کرده است.

وقتی کاربر با دکمه tab بین input ها و... جابه جا میشود، focus فعال میشود

مثال:

input:focus{
	border-color: blue;
}

این 8 مورد از شبه کلاس ها ، از پراستفاده ترین و کاربردی ترین شبه کلاس ها در css هستند.

شاید، سوالی که ممکن است برایتان پیش آمده باشد این است که آیا میتوان با شبه کلاس مخصوص یک المان،

استایل هایی را روی یک المان دیگر اعمال کنیم؟

برای مثال دو div با ایدی های box-1 و box-2 داریم و میخواهیم وقتی موس رو box-1 رفت ، (hover شد)، استایل

هایی به box-2 اعمال شوند.

جواب بله است.

برای استفاده از این آپشن، باید از علامت های (+) و (~) استفاده کنیم.

مثال :

#box-1:hover + #box-2{
	background: red;
}

(اگر موس بر روی box-1 برود، بکگراند box-2 قرمز خواهد شد)

تفاوت (+) و (~) در اینجا چیست؟

اگر از + استفاده کنیم فقط اولین المان با کلاس مد نظر انتخاب میشود. برای مثال یک کلاس با نام box داریم و میخواهیم تعریف

کنیم که اگر موس بر روی المانی با ایدی box-1 رفت ، اولین المانی که دارای کلاس box است را بکگراندش را قرمز کن :

#box-1:hover + .box{
	background: red;
}

ولی اگر از ~ استفاده کنیم، استایل ها بر روی تمام المان هایی که کلاس box را دارا هستند اعمال میشوند

مثال :

#box-1:hover ~ .box{
	background: red;
}

موفق و موید باشید