pseudo-class

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

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

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

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

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

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

 

موقعیتی

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

 

تعاملی

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

 

زبانی

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

 

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

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

 

ساختاری

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

 

غیره

این انتخابگرها در دسته خاصی قرار نمی گیرند:

12 دیدگاه برای “pseudo-class

  1. سلام. یک سوال داشتم:
    یک منو دارم که با li ساخته شده. زیرمنوی یکی از لینک ها پنج تا لینک داره، زیر منوی دیگری فقط یک لینک داره.
    حالا اگر بخوام با سلکتور حرفه ای css بگم که: اون زیرمنویی که هم first-child هست و هم last-child(بعبارتی فقط یک child وجود داره) چطوری میتونم بنویسم؟

    نکته: متضاد این دستور رو داریم. مثلا میخوایم بگیم اون زیرمنوهایی که نه first-child هستند و نه last-child به اینصورت مینویسیم:
    nav li li:not(:first-child):not(:last-child) a

    حالا من دقیقا برعکسش رو میخوام(هم بچه ی اول باشد هم بچه ی آخر). ممنون میشم راهنماییم کنید.

  2. سلام. وقتتون بخیر
    یه سوال داشتم.
    زمانی که روی لینکی از وبسایت خودتون hover میشه ، انگار دوتا خط از وسط به گوشه ها میرن.
    چطور میشه اینطور چیزی رو درست کرد؟

  3. سلام استاد، وقتتون بخیر…
    بخاطر همه زحمت‌هایی که برای آموزش گذاشتید و هنوزم میذارید واقعا ممنونم…
    موقع طراحی سایت یک سوالی به ذهنم رسید که نمیتونم درست و حسابی اون رو در قالب متن بیان کنم و ازتون بپرسم،
    بخاطر همین این سوال رو در یک ویدیوی 1 (یک) دقیقه‌ای در آپارات آپلود کردم تا ببینید:
    https://www.aparat.com/v/WHd7p
    بقول شما اول خیلی کنکاش کردم و گشتم اما هیچی در این مورد پیدا نکردم و با شبه‌کلاس‌ها هم جواب نداد!
    آخرین مرحله پرسیدن از خود شما بوده که الان مزاحمتون شدم…
    از وقتی که برای این سوال میذارید هم واقعا ممنونم…

    1. سلام، وقتتون بخیر
      ممنونم از اینکه اول تحقیق کردین و بعد پرسیدین.

      اگر دارین از تگ a استفاده میکنید، احتملا این مشکل شما رو حل خواهد کرد:

      
      .element {
        -webkit-tap-highlight-color: transparent;
      }
      
      

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *