pseudo-classها کلمات کلیدی هستند که به انتخابگرها برای تعیین یک حالت خاص از عنصر انتخاب شده, اضافه می شوند.

این کلمات کلیدی, مشابه کلاس ها می باشند با این تفاوت که در HTML نوشته نمی شوند.

 

تفاوت دیگر آنها با دیگر انتخابگرها در این است که pseudo-classها عناصر را با توجه به رفتار کاربر, وضعیت عنصر و غیره بصورت پویا هدف قرار می دهند.

مثلا :hover یک pesudo-class است که حالتی که موس بر روی عنصر قرار می گیرد را بیان می کند.

ادامه مطلب

 

در ادامه لیست کامل pseudo-classها بصورت دسته بندی شده آمده است. توجه داشته باشید که برخی از این انتخابگرها دوران آزمایشی خود را در مرورگرها تجربه می کنند پس در تمام مرورگرها پشتیبانی نمی شوند به عنوان نمونه انتخابگر :dir فعلا فقط در مرورگر فایرفاکس بصورت آزمایشی پشتیبانی می شود.

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

 

موقعیتی

این دسته غالبا مربوط به عناصر لینک می باشد اما موارد دیگری هم که در مورد موقعیت عنصر است می تواند در این دسته قرار بگیرد.

 

 

 

• :link
• :visited
• :target

 

تعاملی

انتخابگرهای این دسته وابسته به کارهایی که کاربر انجام می دهد می باشند.

• :focus
• :hover
• :active

 

زبانی

هر آنچه که مربوط به زبان می شود در این دسته قرار دارد.

• :lang()
• :dir()

 

مربوط به عنصر Input

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

• کنترل وضعیت

   

  • :enabled
  • :disabled
  • :read-only
  • :read-write
  • :default
• وضعیت مقدار
  • :checked
  • :indeterminate
• اعتبار سنجی

   

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

 

ساختاری

این دسته غالبا مربوط به جایگاه عناصر داخل نگهدارنده یا همان عنصر پدرشان می باشد.

 

 

• :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