شبه کلاس‌ها در CSS | مفهوم Pseudo


نویسنده:
یکشنبه ۳۰ شهریور ۱۳۹۹
شبه کلاس‌ها در CSS

در این جلسه از آموزش رایگان HTML و CSS به سراغ مفهوم شبه کلاس‌ها در CSS می‌رویم. شبه کلاس که به انگلیسی به آن Pseudo کلاس گفته می‌شود، مفهوم پیچیده‌ای نیست اما در طراحی صفحات وب بسیار کاربردی است. پس در این جلسه هم همراه ادمین‌سایت باشید تا این مفهوم را به طور کامل بررسی کنیم.

مفهوم شبه کلاس‌ در CSS

در جلسات قبلی گفتیم که می‌توانیم برای عناصر، کلاس تعریف کنیم و به کمک یک (.) آنها را در CSS با نام کلاس انتخاب کنیم. برای مثال box. تمامی عناصری که دارای کلاس box‌ هستند را انتخاب می‌کند.

مفهوم شبه کلاس مانند کلاس نیست که بخواهیم برای هر عنصر آن را تعریف کنیم. شبه کلاس‌ها در CSS کمک می‌کنند حالت خاصی از یک عنصر را انتخاب کنیم. یا یک عنصر را در وضعیت مشخصی انتخاب کنیم.

برای مثال فرض کنید در یک لیست می‌خواهیم عناصر لیست را انتخاب کنیم. به کمک li می‌توانیم تمامی عناصر لیست را انتخاب کنیم، اما اگر فقط هدف ما انتخاب اولین عضو لیست باشد چه؟ آنگاه از شبه کلاس استفاده می‌کنیم:

شبه کلاس first-child: فقط li ای را انتخاب می‌کند که عضو اول است. اگر از دو نقطه ابتدای آن متعجب شده‌اید بهتر است به سراغ بررسی ساختار و نحو آنها برویم.

نحو (Syntax) شبه کلاس‌ها در CSS

کافیست ابتدا یک عنصر را با هر روشی که می‌دانید انتخاب کنید بعد به کمک علامت : از یک شبه‌کلاس برای مشخص کردن حالت خاص آن عنصر کمک بگیرید. منظورم از حالت خاص یکی از موارد زیر است:

  • انتخاب یک عنصر که موس روی آن قرار گرفته
  • انتخاب لینکی که توسط کاربر کلیک شده
  • انتخاب فرزند چندم از یک والد
  • و….


مهمترین Pseudo کلاس‌ها

اگر تا به اینجا کمی سردرگم هستید و فکر می‌کنید چیزی متوجه نشده‌اید کاملاً طبیعی است!! چند بخش بعدی موضوع را به خوبی برایتان جا می‌اندازد!

شبه کلاس برای حرکت موس

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

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

شبه کلاس hover


مشخص کردن اولین عنصر والد

عضو اول عضو دوم عضو سوم

همانطور که مشاهده می‌کنید، عضو اول انتخاب و رنگ دلخواه به آن داده شد.


سایر شبه کلاس‌ها

دوستان عزیز می‌توانید هریک از شبکه‌ کلاس‌های زیر را در CSS آزمایش کنید تا با مفهوم دقیق‌تر آن آشنا شوید.

شبه کلاسنمونهکاربرد
activea:activeانتخاب لینک فعال (لحظه کلیک موس روی لینک)
linka:linkانتخاب لینک‌هایی که هنوز کلیک نشده‌اند.
visiteda:visitedانتخاب لینک‌هایی که از روی آنها کلیک شده (دیده شده)
emptyp:emptyانتخاب عنصری که هیچ فرزندی ندارد.
last-childli:last-childانتخاب فرزند آخر یک تگ
()not( p )not:انتخاب نکردن این عنصر، در مثال انتخاب همه عناصر جز p
()nth-child(2n)nth-childانتخاب فرزندان مشخص یک تگ، در مثال فرزندان زوج
first-of-typep:first-of-typeانتخاب اولین عنصر نوع خاص در والد، نمونه:انتخاب اولین p در والد
last-of-typep:last-of-typeانتخاب آخرین عنصر نوع خاص در والد، مثال: انتخاب آخرین p والد
checkedinput:checkedانتخاب عنصری که تیک خورده (در جلسه فرم‌ها به آن می‌پردازیم)
focusinput:focusانتخاب فیلدی که موس روی آن فوکوس کرده (جلسه فرم‌ها)

تمرین: برای اینکه مطمئن شوید که مطالب فوق را به خوبی آموخته‌اید، به سوال زیر پاسخ دهید.
در جدول بالا بعضی از سطرها رنگ شده‌اند. در CSS این سطرها چگونه انتخاب شده‌اند؟ در کامنت نام شبه‌کلاس مربوطه را بنویسید.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

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