آموزش CSS - شبه کلاس ها(pseudo classes)

شبه کلاس ها( Pseudo Class) در CSS نوع دیگری از انتخابگرها هستند که برای تعریف یک حالت خاص از یک تگ می باشد، این حالت خاص مثلا موقع رفتن ماوس بروی یک تگ ، یا موقع فوکوس کردن بروی یک تگ و… میتواند باشد.

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

Selector به عنوان انتخابگر میباشد که قبل از ( : ) قرار گرفته و بعد ازدونقطه شبه کلاس مورد نظر نوشته میشود و در نهایت ویژگی های CSS نوشته میشود.

selector:pseudo-class {
   property: value;
}

دسته بندی شبه کلاس ها

شبه کلاس موقعیتی (Location Pseudo-classes):این دسته غالبا مربوط به عناصر لینک می باشد.

visited:
target:
any-link:
scope:

تعاملی(User Action Pseudo-classes) : وابسته به عملکردهایی هستند که کاربران در حین تعامل با وب‌سایت انجام می‌دهند. این انتخابگرها به طراحان اجازه می‌دهند تا استایل‌ها و تغییرات ظاهری را بر اساس وضعیت واکنش به اقدامات کاربر اعمال کنند.

focus:
hover:
active:
focus-visible:
focus-within:

زبانی (Linguistic Pseudo-classes): برای تغییر استایل بر اساس خصوصیات زبان مورد استفاده قرار می‌گیرند. این تکنیک اغلب در طراحی سایت‌های چندزبانه (multilingual) به کار می‌رود تا استایل‌ها و چیدمان‌ها بر اساس زبان مورد استفاده تغییر کنند.در واقع، این pseudo-classes به تعدادی از ویژگی‌های زبانی که توسط مرورگر شناخته می‌شوند، اشاره دارند.

()lang:
()dir:

مربوط به عنصر Input :این دسته مربوط به شرایط و وضعیت های مختلف در انواع inputها می باشد.

کنترل وضعیت:

enabled:
disabled:
read-only:
read-write:
default:

وضعیت مقدار:

checked:
indeterminate:

اعتبار سنجی:

valid:
invalid:
in-range:
out-of-range:
required:
optional:

ساختاری (Structural Pseudo-classes):انتخابگرهایی هستند که بر اساس جایگاه و ترتیب عناصر در داخل نگهدارنده‌هایشان (عنصر پدر) اعمال می‌شوند. این انتخابگرها به طراحان وب امکان می‌دهند تا عناصر را بر اساس موقعیت و ترتیب داخل یک ساختار HTML انتخاب کنند و استایل‌ها را به این ترتیب تعیین کنند.

root:
empty:

انتخاب فرزندان

first-child:
last-child:
()nth-child:
nth-last-child:
only-child:

انتخاب فرزندان بر اساس نوع

:first-of-type:
:last-of-type:
()nth-of-type:
()nth-last-of-type:
only-of-type:

جدول زیر شبه کلاس ها CSS :

شبه کلاس	توضیحات	مثال
active:	لحظه کلیک بروی یک عنصر ( لینک یا دیگر عناصر ) را مشخص میکند.	{}a:active
any-link:	به عناصری می‌پردازد که به عنوان لینک‌ها عمل می‌کنند. این pseudo-class بر روی عناصری اعمال می‌شود که به عنوان منبع مقصد یک لینک عمل می‌کنند، مستقل از اینکه آیا آن‌ها بازدید شده‌اند یا نه.بطور کلی، اگر یک عنصر به عنوان لینک در نظر گرفته شود و در یک محتوای HTML به عنوان لینک (پیوند) تعریف شده باشد، این pseudo-class بر روی آن عنصر اعمال می‌شود.	{ }a:any-link
autofill:	بر روی عناصری اعمال می‌شود که مقدار آن‌ها به صورت خودکار توسط مرورگر پر شده است این ویژگی معمولاً بر روی ورودی‌های فرم اعمال می‌شود. وقتی کاربر از ویژگی "خودپر کردن" (autofill) مرورگر برای تکمیل خودکار اطلاعات فرم استفاده می‌کند (مثلاً در ورودی‌های نام کاربری و رمز عبور)، pseudo-class :autofill بر روی آن ورودی اعمال می‌شود. این می‌تواند برای تغییر استایل و یا افزودن تغییرات به ویژگی‌های دیدگاه در ورودی‌های فرم مفید باشد	{}input:autofill
checked:	انتخاب عناصری که تیک خورده اند ( یا قراره توسط کاربر تیک بخورند )	{}input:checked
default:	انتخاب عناصری که دارای مقدار پیش فرض می باشند.	{}input:default
defined:	بر روی عناصری اعمال می‌شود که توسط DOM (مدل اسناد شیء) تعریف شده‌اند. این pseudo-class به عناصر سفارشی (custom elements) اشاره دارد که با استفاده از Shadow DOM (مدل شیء سایه) تعریف شده‌اند.
disabled:	انتخاب عناصری که غیرفعال می باشند	input:disabled{}
empty:	انتخاب عناصری که هیچ فرزندی ( یا هیچ محتوایی ) ندارند	div:empty{}
enabled:	انتخاب عناصری که فعال می باشند	input:enabled{}
first:	بر روی عناصری اعمال می‌شود که اولین نمونه‌ای از نوع خود در محدوده انتخاب شده هستند. این pseudo-class می‌تواند بر روی انواع مختلف عناصر اعمال شود، از جمله عناصر سطح بالا (top-level elements)، عناصر فرزندان، یا حتی عناصر با ویژگی‌های خاص.	@page:first{}
first-child:	یک عنصر مشخص را که اولین فرزند یک عنصر دیگر می باشد تطبیق می دهد. ( ترتیب قرارگیری عناصر مهم هست )	li:first-child{}
first-of-type:	انتخاب اولین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست )	p:first-of-type{}
fullscreen:	بر روی عناصری اعمال می‌شود که در حالت تمام صفحه یا Fullscreen (تمام صفحه) قرار دارند. این pseudo-class معمولاً برای استایل‌دهی به عناصری مانند <div> یا <iframe> که در حالت تمام صفحه نمایش داده می‌شوند، استفاده می‌شود.	#id:fullscreen{}
focus:	لحظه فوکوس ( کلیک شدن ) روی تگ	input:focus{}
focus-visible:	روی عناصری اعمال می‌شود که دارای فوکوس هستند ولی این فوکوس به طور ظاهری توسط کاربر ایجاد شده است. این pseudo-class معمولاً برای استایل دهی به عناصری که توسط کاربر با استفاده از کیبورد فوکوس گردیده‌اند و نه توسط موس یا دیگر وسایل ورودی استفاده می‌شود.از focus-visible می‌توانید برای تغییر استایل عناصری که فوکوس‌پذیر هستند ولی فوکوس آنها توسط توجه به کاربر (به عنوان مثال با فشردن دکمه تبلیغاتی) ایجاد شده باشد، استفاده کنید	input:focus-visible{}
focus-within:	بر روی یک عنصر اعمال می‌شود که حداقل یک فرزند دارای فوکوس است. به عبارت دیگر، این pseudo-class بر روی والدینی اعمال می‌شود که حداقل یک فرزند درونی (زیرمجموعه) دارای وضعیت فوکوس است.ازfocus-within می‌توانید برای تغییر استایل ویژگی‌های یک والدین که دارای فرزندی با فوکوس هستند استفاده کنید. این مفهوم مختص وضعیت‌هایی است که حاوی زیرمجموعه‌هایی با فوکوس هستند.	label:focus-within{}
()has:	یک توابع pseudo-class است که به تازگی در اختصاص به Selectors Level 4 به عنوان یک پیش‌نمونه (draft) معرفی شده است. این pseudo-class برای انتخاب عناصری استفاده می‌شود که حداقل یک فرزند دارای ویژگی یا شرایط خاص هستند	article:has(> p) { border: 1px solid #ccc; padding: 10px; }
host:	به تنهایی یک نوع انتخاب CSS است که برای اعمال استایل به عنصر اصلی Shadow DOM استفاده می‌شود.	:host{}
()host:	به عنوان یک تابع با پارامترها استفاده می‌شود و این پارامترها به شما امکان می‌دهند شرایط خاصی را برای انتخاب عنصر اصلی Shadow DOM مشخص کنید.	:host()
host-context:	یک نوع انتخاب جدید در CSS در محیط Shadow DOM است. این نوع انتخاب به شما این امکان را می‌دهد تا استایل‌ها را بر اساس وجود یا عدم وجود یک موقعیت خاص در محیط خارج از Shadow DOM (محیط میزبان) اعمال کنید.	:host-context()
hover:	بر روی عناصری اعمال می‌شود که توسط کاربر هنگامی که ماوس را روی آنها قرار میگیرد، فعال شده‌اند. این شبه کلاس به شما امکان می‌دهد استایل‌های مخصوصی را زمانی که ماوس روی یک عنصر است، اعمال کنید.	button:hover{}
indeterminate:	برروی عناصر <input> با وضعیت "indeterminate"(نامشخص) اعمال می‌شود. وضعیت indeterminate معمولاً برای عناصر <input> از نوع checkbox یا radio button استفاده می‌شود و نشان‌دهنده حالتی است که مقدار دقیق (checked یا unchecked) مشخص نیست.	input:indeterminate{}
in-range:	بر روی عناصر <input> اعمال می‌شود که در محدوده مقادیر مجاز (range) قرار دارند. این شبه کلاس به طور خاص بر روی عناصر <input> از نوع number یا range بهترمی باشد.	input:in-range{}
invalid:	برروی عناصر <input>, <select>, و <textarea> اعمال می‌شود که دارای وضعیت نامعتبر (invalid) هستند. این وضعیت نامعتبر معمولاً زمانی اتفاق می‌افتد که کاربر یک ورودی را ارسال می‌کند که با مقررات یا الگوهای مشخص شده (مانند یک فرمت ایمیل نامعتبر) همخوانی ندارد.	input:invalid{}
()is:	یک تابع در CSS Level 4 است که به شما امکان می‌دهد یک مجموعه از یک یا چند نوع انتخاب را گروه‌بندی کنید. این تابع به طور خاص برای کاهش تعداد انتخاب‌ها و افزایش خوانایی کد CSS مفید است.	:is(ol, ul){}
()lang:	بر روی عناصری اعمال می‌شود که زبان آنها با یک زبان خاص مطابقت دارد. این شبه کلاس معمولاً برای اعمال استایل‌های مخصوص به زبان‌ها در اسناد چندزبانه (multilingual documents) استفاده می‌شود.	*:lang(en){}
last-child:	بر روی عناصر آخرین فرزند یک عنصر والد (parent) اعمال می‌شود. این شبه کلاس بر روی عناصری که آخرین فرزند عنصر والد می‌باشند تأثیر می‌گذارد.	li:last-child{}
last-of-type:	بر روی آخرین عنصر از نوع مشخص (type) در یک عنصر والد اعمال می‌شود. این شبه کلاس بر روی آخرین عنصر از نوع مشخص موجود در عنصر والد تأثیر می‌گذارد.	p:last-of-type{}
left:	در CSS، شبه کلاس‌ها به کار می‌روند تا وضعیت یا ویژگی خاصی را انتخاب و استایل‌دهی کنند. به همین دلیل left: به عنوان یک نمونه از شبه کلاس‌ها وجود ندارد.اگر شما به دنبال استایل‌دهی به عنصرها بر اساس موقعیت چپ‌ترین (leftmost) عنصرها در یک محیط یا چیزی شبیه به این هستید، ممکن است به جای left: از first-child: یا first-of-type: استفاده کنید.	@page:left{}
link:	یکی از شبه کلاس‌هایی است که بر روی لینک‌ها (<a> elements) در CSS اعمال می‌شود. این شبه کلاس به عنوان حالت پیش‌فرض لینک‌ها در مرورگرها عمل می‌کند.درو اقع هنگامی که یک لینک در حالت پیش‌فرض ( هنوز باز نشده است) می باشد.	a:link{}
modal:	در css به عنوان یک شبه کلاس (pseudo-class) وجود ندارد. شبه کلاس‌ها در CSS برای انتخاب و استایل‌دهی به عناصر با ویژگی‌ها و وضعیت‌های خاص مانند :hover، :active، :focus و ... استفاده می‌شوند.اگر به دنبال استایل‌دهی به عنصرهای مرتبط با مدال (modal) هستید، باید به صورت مستقیم به کلاس یا آی‌دی مرتبط با مدالها دسترسی یابید.	:modal{}
()not:	یک تابع (functional pseudo-class) در CSS است که برای انتخاب عناصر مشخصی از یک گروه عناصر استفاده می‌شود. با استفاده از ()not: می‌توانید عناصری که به یک شرط مشخص نمی‌شوند را انتخاب کنید.	p:not(strong){}
()nth-child:	()nth-child: یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر مشخص درون یک عنصر والد (parent) اعمال می‌شود. این شبه کلاس به شما امکان می‌دهد تا عناصری را که در موقعیت‌های مختلف داخل عنصر والد هستند، انتخاب کنید.	li:nth-child(-n+3){}
()nth-last-child:	()nth-last-child: یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر مشخص درون یک عنصر والد (parent) اعمال می‌شود، اما از آخر به اول شمارش می‌شود. یعنی، عناصر آخرین فرزندان عنصر والد به تعداد مشخص شده در این تابع انتخاب می‌شوند.	li:nth-last-child(odd){}
:nth-last-of-type()	()nth-last-of-type:یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر مشخص از یک نوع (type) خاص درون یک عنصر والد (parent) اعمال می‌شود، اما از آخر به اول شمارش می‌شود. یعنی، عناصر آخرین نوع خاص درون عنصر والد به تعداد مشخص شده در این تابع انتخاب می‌شوند.	dd:nth-last-of-type(3n){}
:nth-of-type()	()nth-of-type:یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر مشخص از یک نوع (type) خاص درون یک عنصر والد (parent) اعمال می‌شود. این شبه کلاس به شما امکان می‌دهد تا عناصری را که در موقعیت‌های مختلف داخل عنصر والد هستند، انتخاب کنید.	dd:nth-of-type(even){}
only-child:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصری اعمال می‌شود که تنها فرزند یک عنصر والد (parent) هستند، به عبارت دیگر، تنها عنصر فرزند عنصر والد هستند.	li:only-child{}
only-of-type:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصری اعمال می‌شود که تنها عنصر از نوع خاصی (type) درون یک عنصر والد (parent) هستند. به عبارت دیگر، اگر یک عنصر والد دارای چندین عنصر از یک نوع باشد، این شبه کلاس تنها بر روی عنصری اعمال می‌شود که تنها عنصر از نوع خاصی درون عنصر والد است.	a:only-of-type{}
optional:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی فرم (form elements) اعمال می‌شود که بدون ویژگی required قرار گرفته‌اند. به عبارت دیگر، این شبه کلاس بر روی عناصر ورودی فرمی که مشخصات "اجباری" (required) ندارند تأثیر می‌گذارد.	input:optional{}
out-of-range:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی از نوع number, range, یا date اعمال می‌شود که دارای مقدار خارج از محدوده مجاز می‌باشند. این وضعیت معمولاً در هنگامی رخ می‌دهد که مقدار ورودی از محدوده تعیین شده برای آنها (بین min و max) خارج شود.out-of-range زمانی که می‌خواهید به کاربر اطلاع دهید که مقدار وارد شده در ورودی فرم خارج از محدوده مجاز قرار گرفته است قابل استفاده میباشد.	input:out-of-range{}
picture-in-picture:	در معماری و نحوه استفاده از :picture-in-picture: در سی اس اس یک نمونه از شبه کلاس‌ها نیست. این شبه کلاس‌ها بیشتر برای انتخاب و استایل‌دهی به عناصر با وضعیت یا ویژگی خاصی مانند :hover، :active، :focus و ... استفاده می‌شوند.اگر به دنبال استایل‌دهی خاصی به نمای تصویر در تصویر (Picture-in-Picture) هستید، بهتر است از ویژگی‌ها و API‌های مرورگرها مرتبط با این ویژگی استفاده کنید. این API‌ها به شما امکان می‌دهند تا با انتقال تصویر به یک پنجره کوچک (شبیه نمای تصویر در تصویر) و اعمال اقدامات مرتبط با آن در وبسایت خود، به کاربران تجربه بهتری ارائه دهید. CSS پیش‌فرض به تنظیم نمای تصویر در تصویر مستقیماً پشتیبانی نمی‌شود و برای این کار باید از JavaScript و API‌های مرورگرها استفاده کنید.	:picture-in-picture{}
placeholder-shown:	یک شبه کلاس (pseudo-class) در CSS است که بر روی یک ورودی فرم (form input) اعمال می‌شود که placeholder آن نمایش داده می‌شود (و مقدار واقعی وارد نشده است).	input:placeholder-shown{}
read-only:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی (input elements) و عناصر متنی (text elements) اعمال می‌شود که در حالت "تنها خواندنی" یا "readonly" قرار دارند. این حالت به معنای این است که کاربر نمی‌تواند مقدار ورودی را تغییر دهد یا ویرایش کند.	textarea:read-only{}
read-write:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی (input elements) و عناصر متنی (text elements) اعمال می‌شود که در حالت "قابل ویرایش" یا "read-write" قرار دارند. این حالت به معنای این است که کاربر می‌تواند مقدار ورودی را ویرایش یا تغییر دهد.	textarea:read-write{}
required:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی (input elements) اعمال می‌شود که دارای ویژگی required هستند. این ویژگی بیانگر این است که کاربر باید یک مقدار برای این عنصر وارد کند.	input:required{}
right:	یک ویژگی در CSS است که برای تنظیم موقعیت افقی یک عنصر استفاده می‌شود. این ویژگی معمولاً با واحد‌های مختلف اندازه‌گیری مانند پیکسل (px)، درصد (%)، و ... استفاده می‌شود.	@page:right{}
root:	یک شبه کلاس (pseudo-class) در CSS نیست؛ بلکه یک نشانگر نقطه شروع (root) برای انتخاب‌ها است. با root: می‌توانید به عنصری در سطح بالای مستند (document) یا محیط نمایش (viewport) اشاره کنید. از root: برای تعریف متغیرهای سفارشی (custom properties) در CSS و استفاده از متغیرها در سراسر مستند یا تنظیمات کلی مستند که بخش‌های مختلف به آن نیاز دارند استفاده می‌شود.	:root{}
scope:	یک شبه کلاس (pseudo-class) در CSS نیست. در واقع، :scope یک تابع JavaScript است و در متدهایی مانند querySelector و querySelectorAll در DOM (Document Object Model) به کار می‌رود.در کنترل کننده CSS نیزscope: به عنوان یک شبه کلاس در CSS وجود ندارد. برای انتخاب عنصرها در CSS، شبه کلاس‌های دیگری مانندhover، :active، :focus و ... به کار می‌روند.	:scope{}
target:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصری اعمال می‌شود که به عنوان هدف (target) در URL مشخص شده‌اند. این عناصر معمولاً با استفاده از لینک‌ها و آنکرها (anchors) در URL تغییر می‌کنند.	p:target{}
valid:	یک شبه کلاس (pseudo-class) در CSS است که بر روی عناصر ورودی فرم (form elements) اعمال می‌شود که دارای وضعیت "معتبر" هستند. این وضعیت به معنای این است که مقدار وارد شده در ورودی، مطابق با محدودیت‌ها و قوانین تعیین شده برای آن فیلد است.	input:valid{}
visited:	یک شبه کلاس (pseudo-class) در CSS است که بر روی لینک‌هایی اعمال می‌شود که قبلاً توسط کاربر بازدید شده‌اند. این شبه کلاس به صورت ویژه برای تغییر استایل لینک‌ها بعد از بازدید استفاده می‌شود.استفاده از visited: معمولاً برای تغییر استایل لینک‌ها بعد از بازدید آنها و تجربه کاربری بهتر استفاده می‌شود. این ویژگی به دلیل محدودیت‌های امنیتی، در برخی موارد توسط مرورگرها محدودیت‌هایی دارد.	a:visited{}
()where:	یک تابع (functional pseudo-class) در CSS است که برای گروه‌بندی شبه کلاس‌ها و استفاده از گزینه‌های مرتبط با گروه‌ها در انتخاب‌های CSS به کار می‌رود. این تابع برای انتخاب عنصرها با توجه به گروهی از شبه کلاس‌ها مورد استفاده قرار می‌گیرد.	:where(ol, ul){}

لایه های(layers) - درس قبلی

درس بعدی - شبه عناصر(pseudo elements)