دستورالعمل مرجع کلاس‌های ناشناخته CSS

pseudo-classes CSS

pseudo-classes برای تعریف حالت‌های خاص عنصر استفاده می‌شوند.

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

  • استایل‌گذاری هنگامی که کاربر موس را بر روی عنصر قرار می‌دهد
  • استایل‌گذاری برای لینک‌های بازدید شده و غیربازدید شده
  • استایل‌گذاری هنگامی که عنصر تمرکز دارد
  • طراحی استایل برای عناصر فرم معتبر/غیرمعتبر/ضروری/اختیاری

جدول زیر نمایش می‌دهد که CSS دارای پseudo-classes مختلفی است:

پseudo-classes مثال شرح مثال
:active a:active انتخاب لینک‌های فعال
:any-link a:anylink انتخاب تمام عناصر <a> یا <area> که دارای ویژگی href هستند.
:auto-fill input:autofill انتخاب تمام عناصر <input> که توسط مرورگر به صورت خودکار پر شده‌اند.
:checked option:checked همسان‌سازی تمام عناصر <input> یا <option> انتخاب شده.
:default input:default انتخاب عناصر فرم پیش‌فرض در یک مجموعه از عناصر مرتبط.
:defined :defined انتخاب تمام عناصر تعریف شده (عناصر استاندارد یا تعریف شده توسط کاربر).
:dir() :dir(rtl) انتخاب عناصری که دارای جهت نوشتاری مشخصی هستند.
:disabled option:disabled انتخاب تمام عناصر غیرفعال، معمولاً برای عناصر فرم استفاده می‌شود.
:empty div:empty انتخاب تمام عناصر بدون فرزندان (شامل نودهای متن)
:enabled input:enabled انتخاب همه عناصر فعال، معمولاً برای عناصر فرم استفاده می‌شود.
:first @page :first نمایش اولین صفحه مدارک چاپ شده (با استفاده از قاعده @page).
:first-child p:first-child انتخاب عنصر که اولین فرزند فرزندان والد است (در مجموعه برادران).
:first-of-type li:first-of-type انتخاب اولین عنصر خاص از مجموعه برادران.
:focus select:focus انتخاب عناصر که فокус دارند، معمولاً برای عناصر فرم استفاده می‌شود.
:focus-visible button:focus-visible انتخاب عناصر که فокус دارند (تنها در حالت‌هایی که فокус از طریق کلید而非 ماوس قرار می‌گیرد).
:focus-within form:focus-within مطابقت با عناصر یا هر نسل فرزند آن‌ها که فокус دارند.
:fullscreen :fullscreen انتخاب عناصر که در حالت تمام‌صفحه هستند.
:has() h2:has(+p) انتخاب عناصر <h2> که به دنبال عناصر <p> قرار دارند و استایل را به <h2> اعمال می‌کنند.
:hover a:hover انتخاب عناصر که با ماوس قرار دارند.
:in-range input:in-range انتخاب عناصر <input> با مقدار در محدوده مشخص شده.
:indeterminate input:indeterminate انتخاب عناصر فرم که در حالت غیر معین هستند.
:invalid input:invalid انتخاب عناصر فرم نامعتبر.
:is() :is(ul, ol) تمام عناصر <ul> و <ol> را انتخاب کنید.
:lang() p:lang(it) انتخاب عناصر <p> با ویژگی lang به "it" (ایتالیایی).
:last-child li:last-child انتخاب عناصر <li> به عنوان آخرین فرزند فرزندان والد.
:last-of-type p:last-of-type انتخاب عناصر <p> به عنوان آخرین عناصر <p> والد.
:left @page :left نمایش همه صفحات چپ مدارک چاپ شده (با استفاده از قاعده @page).
:link a:link انتخاب همه لینک‌های غیر بازدید شده.
:modal :modal انتخاب عناصر که در حالت مودال هستند.
:not() :not(p) انتخاب عناصر که <p> نیستند.
:nth-child() p:nth-child(2) انتخاب عناصر <p> به عنوان دومین فرزند عنصر والد.
:nth-last-child() p:nth-last-child(2) انتخاب عناصر <p> که دومین فرزند آخرین عنصر والد آن هستند.
:nth-last-of-type() p:nth-last-of-type(2) انتخاب عناصر <p> که دومین فرزند عنصر والد آن هستند.
:nth-of-type() p:nth-of-type(2) انتخاب عناصر <p> که دومین <p> فرزند عنصر والد آن هستند.
:only-child p:only-child انتخاب عناصر <p> که تنها فرزند عنصر والد آن هستند.
:only-of-type p:only-of-type انتخاب عناصر <p> که تنها <p> فرزند عنصر والد آن هستند.
:optional textarea:optional انتخاب عناصر <input>،<select> یا <textarea> که ویژگی required ندارند.
:out-of-range input:out-of-range انتخاب عناصر <input> که مقادیر آن‌ها خارج از محدوده مشخص شده است.
:placeholder-shown input:placeholder-shown انتخاب عناصر <input> یا <textarea> که دارای متن جایگزین نمایش داده شده هستند.
:popover-open :popover-open انتخاب عناصری که در حال نمایش پاپ‌آپ هستند.
:read-only input:read-only انتخاب عناصر ورودی که ویژگی readonly دارند.
:read-write input:read-write انتخاب عناصر ورودی قابل ویرایش.
:required input:required انتخاب عناصر ورودی که دارای ویژگی required هستند.
:right @page :right نمایش همه صفحات سمت راست مستند (با استفاده از قاعده @page).
:root :root انتخاب عنصر ریشه مستند.
:scope :scope انتخاب عناصری که به عنوان نقطه یا محدوده مرجع برای انتخاب‌کننده هستند.
:state() :state() انتخاب عنصر شخصی‌سازی شده که دارای وضعیت سفارشی مشخصی است.
:target :target انتخاب عنصر هدف فعلی.
:user-invalid :user-invalid انتخاب عناصر فرم که دارای مقادیر نامعتبر هستند (پس از تعامل کاربر با آن‌ها).
:user-valid :user-valid انتخاب عناصر فرم که دارای مقادیر معتبر هستند (پس از تعامل کاربر با آن‌ها).
:valid input:valid انتخاب همه عناصر ورودی که دارای مقادیر معتبر هستند.
:visited a:visited تمام لینک‌های بازدید شده را انتخاب کنید.
:where() :where(ol, ul) تمام عناصر <ul> و <ol> را انتخاب کنید.