شبه کلاس ها کلمات کلیدی ای هستند که برای تعیین یک حالت خاص از عنصر انتخاب شده به سلکتورها اضافه می شوند. شبه کلاس ها مشابه کلاس های معمولی CSS می باشند با این تفاوت که در HTML نوشته نمی شوند.
تفاوت دیگر آنها با دیگر سلکتور ها این است که کلاس های Pseudo عناصر HTML را با توجه به رفتار کاربر وضعیت عنصر را بصورت پویا و زنده هدف قرار می دهند. در طراحی سایت و در نتیجه CSS ممکن است قصد داشته باشید تا به سلکتورهای خود جلوه های خاصی بدهید، برای اینکار باید از شبه کلاس ها یا همان Pseudo-Classes استفاده کنید. شبه کلاس ها با علامت کولن یعنی " : " مشخص می شوند و بعد از سلکتور یا کلاس قرار می گیرند.
شبه کلاس ها دارای کاربردهای زیر می باشند:
- استایل دادن به یک عنصر در زمانی که نشانگر موس روی آن قرار می گیرد.
- لینک های باز شده و لینک های باز نشده به شکل های متفاوتی استایل داده شوند.
- استایل دادن به یک عنصر وقتی که مورد توجه قرار می گیرد (روی آن کلیک می شود).
نحوه استفاده از شبه کلاس ها :
قاعده ی نوشتاری شبه کلاس ها به شکل زیر است. کلاس های کاذب با علامت کولن یعنی " : " مشخص می شوند و بعد از سلکتور یا کلاس قرار می گیرند.
کلاس های Anchor Pseudo
لینک ها در صفحهات وب می توانند به اشکال مختلفی نمایش داده شوند:
خروجی مثال بالا به شکل زیر است:
الان اگر با موس بر روی لینک This is a Link قرار بگیرید، رنگ لینک تغییر خواهد کرد:
ترکیب کلاس های Pseudo و کلاس های CSS
کلاس های Pseudo می توانند با کلاس های CSS ترکیب شوند. به عنوان مثال وقتی روی لینک زیر قرار می گیرید رنگ لینک تغییر می کند:
خروجی مثال بالا به شکل زیر است:
Hover:
hover یک کلاس کاذب است که برای انتخاب و استایل دهی به عنصری که کاربر با موس بر روی آن قرار گرفته است، استفاده می شود. از Hover برای تعامل بهتر کاربر با عناصر HTML استفاده می شود. از این سلکتور برای نمایش محتواهای مخفی نیز استفاده می شود. به عنوان مثال برای نمایش زیر منو ها و جزییات بیشتر یک آیتم می توانید از شبه کلاس hover استفاده کنید.
نکته: استفاده از hover برای دستگاهای لمسی توصیه نمی شود چون با مشکلاتی همراه خواهد بود.
در مثال زیر زمانی که اشاره گر موس بر روی دکمه Mouse Over Me قرار می گیرد، پس زمینه دکمه به رنگ آبی تغییر خواهد کرد.
بعد از اجرای کد بالا شما خروجی زیر را در پنجره مرورگر خود خواهید دید:
اکنون با قرار گرفتن موس روی دکمه سبز رنگ، رنگ پس زمینه عنصر به رنگ آبی تغییر می کند و به شکل زیر درمی آید.
نمایش Tooltip با استفاده از شبه کلاس Hover
در مثال زیر با قرار دادن موس روی متن یک نکته نمایش داده می شود:
خروجی مثال بالا به شکل زیر است:
اکنون اگر با موس بر روی نوشته بالا قرار بگیرید، یک کادر متنی زرد رنگ پایین متن نمایش داده خواهد شد.
شبه کلاس first-child
کلاس :first-child یک عنصر مشخص را که اولین فرزند یک عنصر دیگر می باشد تطبیق می دهد.
تطبیق دادن اولین عنصر p
در مثال زیر، سلکتور تمامی عنصر های p که اولین فرزند هر عنصر باشد را تطبیق می دهد.
خروجی مثال بالا به شکل زیر است. (همانطور که می بینید اولین عنصر پاراگراف به رنگ آبی درآمده است):
تطبیق دادن اولین عنصر i به تمام عناصر p
در مثال زیر، سلکتور اولین عنصر i را به تمامی عناصر p تطبیق می دهد:
خروجی مثال بالا به شکل زیر است:
تطبیق دادن تمامی عناصر i که درون اولین فرزند عنصر p هستند
در مثال زیر، سلکتور نوشته شده تمام عناصر i ، عناصر p که اولین فرزند یک عنصر دیگر باشند را تطبیق می دهد:
خروجی مثال بالا به شکل زیر است:
