🎁 تخفیف تمامی پکیج های آموزشی 🎁

شبه کلاس ها یا Pseudo class ها در CSS - آموزش طراحی سایت

شبه کلاس ها یا Pseudo class ها عناصر HTML را با توجه به رفتار کاربر و وضعیت عنصر هدف قرار می دهند.

شبه کلاس ها یا Pseudo class ها در CSS - آموزش طراحی سایت

شبه کلاس ها کلمات کلیدی ای هستند که برای تعیین یک حالت خاص از عنصر انتخاب شده به سلکتورها اضافه می شوند. شبه کلاس ها مشابه کلاس های معمولی CSS می باشند با این تفاوت که در HTML نوشته نمی شوند.
تفاوت دیگر آنها با دیگر سلکتور ها این است که کلاس های Pseudo عناصر HTML را با توجه به رفتار کاربر  وضعیت عنصر را بصورت پویا و زنده هدف قرار می دهند. در طراحی سایت و در نتیجه CSS ممکن است قصد داشته باشید تا به سلکتورهای خود جلوه های خاصی بدهید، برای اینکار باید از شبه کلاس ها یا همان Pseudo-Classes استفاده کنید. شبه کلاس ها با علامت کولن یعنی " : " مشخص می شوند و بعد از سلکتور یا کلاس قرار می گیرند.

شبه کلاس ها دارای کاربردهای زیر می باشند:

  • استایل دادن به یک عنصر در زمانی که نشانگر موس روی آن قرار می گیرد.
  • لینک های باز شده و لینک های باز نشده به شکل های متفاوتی استایل داده شوند.
  • استایل دادن به یک عنصر وقتی که مورد توجه قرار می گیرد (روی آن کلیک می شود).

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

آموزش طراحی سایت

قاعده ی نوشتاری شبه کلاس ها به شکل زیر است. کلاس های کاذب با علامت کولن یعنی " : " مشخص می شوند و بعد از سلکتور یا کلاس قرار می گیرند.


کلاس های Anchor Pseudo

لینک ها در صفحهات وب می توانند به اشکال مختلفی نمایش داده شوند:

آموزش شبه کلاس ها در CSS

خروجی مثال بالا به شکل زیر است:

Pseudo در CSS آموزش کلاس های

الان اگر با موس بر روی لینک This is a Link قرار بگیرید، رنگ لینک تغییر خواهد کرد:

آموزش طراحی سایت


ترکیب کلاس های Pseudo و کلاس های CSS

کلاس های Pseudo می توانند با کلاس های CSS ترکیب شوند. به عنوان مثال وقتی روی لینک زیر قرار می گیرید رنگ لینک تغییر می کند:

آموزش شبه کلاس ها در CSS

خروجی مثال بالا به شکل زیر است:

آموزش شبه کلاس ها در CSS

Hover:

hover یک کلاس کاذب است که برای انتخاب و استایل دهی به عنصری که کاربر با موس بر روی آن قرار گرفته است، استفاده می شود. از Hover برای تعامل بهتر کاربر با عناصر HTML استفاده می شود. از این سلکتور برای نمایش محتواهای مخفی نیز استفاده می شود. به عنوان مثال برای نمایش زیر منو ها و جزییات بیشتر یک آیتم می توانید از شبه کلاس hover استفاده کنید.
نکته: استفاده از hover برای دستگاهای لمسی توصیه نمی شود چون با مشکلاتی همراه خواهد بود.

در مثال زیر زمانی که اشاره گر موس بر روی دکمه Mouse Over Me قرار می گیرد، پس زمینه دکمه به رنگ آبی تغییر خواهد کرد.

آموزش طراحی سایت

بعد از اجرای کد بالا شما خروجی زیر را در پنجره مرورگر خود خواهید دید:

Pseudo در CSS آموزش کلاس های

اکنون با قرار گرفتن موس روی دکمه سبز رنگ، رنگ پس زمینه عنصر به رنگ آبی تغییر می کند و به شکل زیر درمی آید.

آموزش CSS


نمایش Tooltip با استفاده از شبه کلاس Hover

در مثال زیر با قرار دادن موس روی متن یک نکته نمایش داده می شود:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش CSS

اکنون اگر با موس بر روی نوشته بالا قرار بگیرید، یک کادر متنی زرد رنگ پایین متن نمایش داده خواهد شد.

آموزش CSS


شبه کلاس first-child

کلاس :first-child یک عنصر مشخص را که اولین فرزند یک عنصر دیگر می باشد تطبیق می دهد.


تطبیق دادن اولین عنصر p

در مثال زیر، سلکتور تمامی عنصر های p که اولین فرزند هر عنصر باشد را تطبیق می دهد.

آموزش CSS

خروجی مثال بالا به شکل زیر است. (همانطور که می بینید اولین عنصر پاراگراف به رنگ آبی درآمده است):

آموزش طراحی سایت


تطبیق دادن اولین عنصر i به تمام عناصر p

در مثال زیر، سلکتور اولین عنصر i را به تمامی عناصر p تطبیق می دهد:

Pseudo در CSS آموزش کلاس های

خروجی مثال بالا به شکل زیر است:

Pseudo در CSS آموزش کلاس های


تطبیق دادن تمامی عناصر i که درون اولین فرزند عنصر p هستند

در مثال زیر، سلکتور نوشته شده تمام عناصر i ، عناصر p که اولین فرزند یک عنصر دیگر باشند را تطبیق می دهد:

آموزش طراحی سایت

خروجی مثال بالا به شکل زیر است:

آموزش طراحی سایت

آموزش طراحی سایت آموزش کلاس های Pseudo آموزش CSS آموزش کلاس های کاذب آموزش Pseudo class

مقالات این دسته بندی