با استفاده از این انتخابگرهای پیشرفته CSS قدرت بیشتری بر طراحی های وب خود به دست آورید.
CSS از انتخابگرهای مختلفی برای شناسایی عناصر برای استایل‌سازی پشتیبانی می‌کند که هر کدام مجموعه قوانین خاص خود را دارند. در حالی که اکثر روش های انتخاب ساده هستند، شبه کلاس ها و شبه عناصر انعطاف پذیری بیشتری را ارائه می دهند. آنها به شما اجازه می دهند عناصر را بر اساس وضعیت یا موقعیت آنها در یک ساختار انتخاب کنید یا بخش های خاصی از محتوا را انتخاب کنید.
استفاده از این انتخابگرها ممکن است دشوار باشد، و به راحتی می‌توان کلاس‌های کاذب را با شبه عناصر ترکیب کرد، بنابراین چگونه بین آنها تفاوت قائل می‌شوید؟
آشنایی با کلاس های شبه CSS
یک کلاس شبه CSS مانند یک کلمه کلیدی خاص است که می توانید با انتخابگرها برای استایل دادن به عناصر به روش های مختلف استفاده کنید. این کلمات کلیدی به شما کمک می‌کنند تا زمانی که موارد خاصی اتفاق می‌افتد، عناصر را هدف قرار دهید، مانند زمانی که کاربر ماوس خود را روی یک عنصر می‌گذارد، روی آن کلیک می‌کند یا چیزی را در فیلد ورودی تایپ می‌کند.
شبه کلاس ها با تغییر نحوه ظاهر یا رفتار عناصر بر اساس اقدامات کاربر، صفحه وب شما را تعاملی تر و پاسخگوتر می کنند. هنگامی که از آنها با سایر انتخابگرهای CSS استفاده می کنید، کنترل دقیقی بر روی استایل و تعامل ارائه می دهند.
CSS شبه کلاس نحو و استفاده
سینتکس یک کلاس شبه CSS از یک دونقطه (:) تشکیل شده است که نام یک کلاس شبه به دنبال آن قرار می گیرد. در اینجا نحو اصلی آمده است:
selector:pseudo-class {
/* styles */
}
در این نحو:
- انتخابگر به عنصر یا عناصری اشاره دارد که می‌خواهید سبک‌ها را انتخاب کرده و روی آن اعمال کنید. این می تواند یک عنصر HTML، یک کلاس، یک ID یا یک انتخابگر پیچیده تر مانند یک ترکیب باشد. انتخابگر اختیاری است، اما معمولاً از یکی استفاده می کنید. بدون آن، شبه کلاس شما تمام عناصری را که می تواند روی آنها اعمال کند، هدف قرار می دهد.
- شبه کلاس کلمه کلیدی است که وضعیت یا شرایط خاصی را نشان می دهد که می خواهید هدف قرار دهید.
CSS شبه کلاس ها را بر اساس عملکرد و شرایطی که هدف قرار می دهند به چندین گروه دسته بندی می کند. در اینجا دسته بندی های اصلی به همراه چند نمونه آورده شده است:
تعامل کاربر
: شناور
زمانی که نشانگر ماوس روی آن قرار می گیرد، عنصری را انتخاب می کند.
:فعال
زمانی که کاربر آن عنصر را فعال می کند، معمولاً با کلیک کردن، عنصری را انتخاب می کند.
:ملاقات کرد
پیوندهایی را که کاربر بازدید کرده است انتخاب می کند.
ساختاری
:بچه اول
اولین عنصر فرزند والدین را انتخاب می کند.
:آخرین فرزند
آخرین عنصر فرزند والدین را انتخاب می کند.
:nth-child(n)
عناصر را بر اساس موقعیت آنها در یک والدین انتخاب می کند و به شما امکان می دهد فرزندان خاصی را هدف قرار دهید.
مربوط به فرم
:معلول
عناصر فرم غیرفعال را انتخاب می کند.
:بررسی شد
دکمه های رادیویی یا کادرهای تأیید علامت زده را انتخاب می کند.
وضعیت عنصر UI
:بی اعتبار
عناصر فرم نامعتبر را انتخاب می کند.
:ضروری
فیلدهای مورد نیاز عناصر فرم را انتخاب می کند.
:اختیاری
عناصر فرم را که فیلدهای اختیاری هستند انتخاب می کند.
مرتبط با پیوند
:ارتباط دادن
پیوندهای بازدید نشده را انتخاب می کند.
مبتنی بر زبان
:lang()
عناصر را بر اساس زبان مشخص شده در ویژگی “lang” آنها انتخاب می کند.
می توانید با اعمال افکت های :hover روی تصاویر در گالری، یک مثال معمولی را امتحان کنید. سبک‌های معمولی شامل بزرگ‌کردن یا محو کردن این تصاویر هنگامی که کسی روی آنها می‌چرخد.
کاوش شبه عناصر CSS
شبه عنصر CSS مانند یک کلمه کلیدی خاص است که می توانید با انتخابگرها برای استایل بخشیدن به بخش های خاصی از محتوای یک عنصر یا برای درج محتوای اضافی استفاده کنید. این کلمات کلیدی به شما این امکان را می دهند که عناصر را بر اساس ساختار محتوای آنها هدف قرار داده و به آنها سبک دهید.
عناصر شبه، طراحی و چیدمان صفحه وب شما را با دادن توانایی استایل دادن به عناصر به روشی که به طور سنتی فقط با عناصر HTML واقعی امکان پذیر بود، بهبود می بخشد.
نحو و پیاده سازی شبه عنصر CSS
شبه عناصر در CSS دارای یک نحو خاص هستند که شامل استفاده از دو دونقطه (::) به دنبال نام شبه عنصر است. در اینجا نحو اصلی است:
selector::pseudo-element {
/* styles */
}
در این نحو:
- انتخابگر عنصری را هدف قرار می دهد که می خواهید شبه عنصر را روی آن اعمال کنید. این می تواند هر انتخاب کننده CSS معتبری باشد، از جمله هیچ کدام.
- شبه عنصر نام شبه عنصری است که می خواهید هدف قرار دهید. شما فقط می توانید از یک شبه عنصر در یک انتخابگر استفاده کنید زیرا آنها واقعاً در ترکیب معنی ندارند.
در اینجا برخی از شبه عناصر وجود دارد:
::قبل از
محتوا را قبل از محتوای عنصر انتخاب شده درج می کند.
::بعد از
محتوا را بعد از محتوای عنصر انتخاب شده درج می کند.
:: حرف اول
اولین حرف متن را در یک عنصر استایل می دهد.
::انتخاب
به بخشی از متن که کاربر با مکان نما خود انتخاب کرده است استایل می دهد.
:: نشانگر
به کادر نشانگر یک مورد فهرست (به عنوان مثال، نقطه یا شماره در یک لیست) استایل می دهد.
:: نشانه
سبک‌ها را برای نشانه‌ها در عناصر رسانه‌ای مانند
درک عناصر شبه ::before و ::after بسیار دشوار است، بنابراین تمرین آنها به شما کمک می کند تا در بقیه موارد تسلط پیدا کنید.
مشابهت ها و تفاوت ها
در اینجا شباهت ها و تفاوت های شبه کلاس های CSS و شبه عناصر وجود دارد:
شبه کلاس ها
شبه عناصر
نحو
پیشوند با دو نقطه (:).
پیشوند با دو دونقطه (::).
استفاده
عناصر را بر اساس وضعیت، موقعیت یا تعامل کاربر انتخاب کنید و سبک دهید.
به بخش های خاصی از محتوای یک عنصر سبک دهید یا عناصر مجازی ایجاد کنید.
انتخابگرها
می تواند در هر نقطه از یک انتخابگر پیچیده یا مرکب رخ دهد.
باید جزء نهایی یک انتخابگر باشد و فقط یک بار ظاهر شود.
درج محتوا
محتوا را درج نمی کند، عمدتاً برای استایل بر اساس حالت.
می تواند محتوا یا عناصر مجازی را قبل یا بعد از محتوای عنصر انتخاب شده درج کند.
یک ظاهر طراحی تایپوگرافیک
معمولاً برای یک ظاهر طراحی تایپوگرافی استفاده نمی شود.
برای استایل نوشتاری و تایپوگرافی (به عنوان مثال، :: اولین خط، :: حرف اول) استفاده می شود.
قطعات هدفمند
کل عناصر را هدف قرار می دهد.
بخش های خاصی از محتوای یک عنصر را هدف قرار می دهد.
پشتیبانی مرورگر
به طور کلی به خوبی پشتیبانی می شود.
به طور کلی به خوبی پشتیبانی می شود، اما برخی از مرورگرهای قدیمی ممکن است پشتیبانی محدودی داشته باشند.
شبه کلاس ها و شبه عناصر در CSS برای ایجاد سبک های مختلف و ویژگی های تعاملی مهم هستند. در حالی که آنها شباهت هایی دارند، اما هر کدام نقش منحصر به فرد خود را در طراحی و توسعه وب دارند.
شبه کلاس ها و شبه عناصر در عمل
شما می توانید با استفاده از شبه کلاس ها و شبه عناصر CSS در پروژه های مختلف برای ارزیابی درک خود تمرین کنید. نمونه‌هایی از پروژه‌های آسانی که می‌توانید انجام دهید شامل کارت‌های نمایه، منوهای پیمایش، و استایل‌سازی فهرست و غیره است. این پروژه‌ها تجربه عملی را برای بهبود مهارت‌های CSS شما فراهم می‌کنند و در عین حال تعامل و سبک را در طراحی‌های وب شما گنجانده‌اند.