توسعه دهندگان فرانت‌اند لازم نیست فقط CSS بنویسند، بلکه باید بدانند که چگونه آن را به طور موثر و کارآمد بنویسند. بعضی اوقات ما روی پروژه‌های بزرگی کار می‌کنیم که به CSS برای بهینه سازی سرعت نیاز دارند، شما برای انتخاب استایل کارآمد به عناصر بدون شناسه یا کلاس آن‌ها به سلکتور های کارآمد نیاز دارید. بنابراین، این امر خواستار درک صحیح سلکتور های موجود است. می‌خواهیم در مورد آن صحبت کنیم، بیایید سریع به آن بپردازیم.
شبه کلاس ها، کلاس های CSS هستند که برای تعریف حالت یک عنصر استفاده می‌شوند. آن‌ها عناصری را هدف قرار می‌دهند که نمی‌توانند با ترکیب کننده‌ها یا سلکتور های ساده مانند id یا class مورد استفاده قرار گیرند. از آن‌ها برای انتخاب عناصر بر اساس ویژگی‌ها، حالت‌ها و موقعیت نسبی آن‌ها استفاده می‌شود.
سینتکس شبه کلاس
شبه کلاس یک سینتکس ساده دارد. آن‌ها توسط دو نقطه (:) درست بعد از سلکتور CSS قرار می‌گیرند.
selector:pseudo-class {
property:value;
}در حال حاضر، ما در مورد مثال‌های بسیاری از شبه کلاس ها صحبت خواهیم کرد و بعدا توضیح خواهیم داد که تفاوت آن‌ها با شبه عناصر چیست.
شبه کلاس ها عناصر منظم را انتخاب می‌کنند اما تحت شرایط خاص. به عنوان مثال وقتی موقعیت آن‌ها نسبی باشد یا در شرایط خاصی باشند.
برای دنبال کردن مثال‌ها، به قطعه کد زیر مراجعه کنید.
<div class="container">
<h1>Top 5 Languages </h1>
<p>In the last year, developers collaborated in more than 370 primary languages on GitHub. The following are the the top five languages with more contributions on GitHub</p>
<div class="list">
<ul>
<li class="list-item"> <a href="#"> Javascript </a> </li>
<li class="list-item"> <a href="#"> Python </a> </li>
<li class="list-item"> <a href="#"> Java </a> </li>
<li class="list-item"> <a href="#"> PHP </a> </li>
<li class="list-item"> <a href="#"> C# </a> </li>
</ul>
</div
</div>شبه کلاس های پویا
این‌ها حالت‌های شبه کلاس مرتبط با لینک هستند که در CSS1 گنجانده شده‌اند. هر یک از این حالت‌ها را می‌توان روی یک عنصر اعمال کرد، معمولا <a>. آن‌ها شامل:
link: - این فقط تگ‌های <a> با صفات href را انتخاب می‌کند. اگر خالی باشد کار نخواهد کرد.
active: - لینک را هنگام فعال شدن انتخاب می‌کند (با کلیک بر روی آن). به عنوان مثال برای حالت "pressed" یک لینک به استایل دکمه.
visited: - لینک‌هایی را که قبلا توسط مرورگر بازدید شده است، انتخاب می‌کند.
hover: - این حالت همیشه مورد استفاده قرار می‌گیرد. وقتی نشانگر ماوس روی لینکی برود، آن لینک در حالت hover است و این گزینه آن را انتخاب می‌کند.
با مراجعه به index.html، می‌خواهیم پس زمینه <li> را هنگام هاور شدن تغییر دهیم و به همه لینک‌های فعال و بازدید شده رنگ‌های مشخصی بدهیم.
.list-item:hover {
background-color: aliceblue;
}
.list a:link{
color: black;
}
.list a:active{
color: green;
}
.list a:visited{
color: red;
}ساختار شبه کلاس ها
این حالت‌ها / سلکتور های هیجان انگیز در CSS2 معرفی شدند. آن‌ها عناصر را با توجه به موقعیت خود و ارتباط با عناصر دیگر هدف قرار می‌دهند. آن‌ها شامل:
root: - این عنصری را که در ریشه است به طور خاص عنصر <html> را انتخاب می‌کند، مگر اینکه شما در محیط دیگری کار کنید که به نوعی امکان CSS را نیز فراهم می‌کند.
first-child: - اولین عنصر را در والدین انتخاب می‌کند.
last-child: - آخرین عنصر را در والدین انتخاب می‌کند.
()nth-child: - عناصر را بر اساس عبارت جبری ارائه شده انتخاب می‌کند (به عنوان مثال "2n" یا "4n-1"). مثلا می‌توانید از "2n" برای انتخاب موقعیت‌های زوج و "2n-1" برای موقعیت‌های فرد استفاده کنید. توانایی انجام کارهای دیگری مانند انتخاب "هر چهار عنصر"، "شش عنصر اول" و مواردی از این قبیل را نیز دارد. در اینجا با جزئیات بیشتر آورده شده است.
first-of-type: - اولین عنصر این نوع را در بین والدین انتخاب می‌کند. اگر شما دو div داشته باشید، هر کدام با یک پاراگراف و لینک. سپسdiv a: first-of-type اولین لینک را در داخل div اول و اولین لینک را در داخل div دوم انتخاب می‌کند.
last-of-type: - این همانند بالا کار می‌کند با این تفاوت که آخرین عنصر را به جای اولین عنصر انتخاب می‌کند.
()nth-of-type: - مانند nth-child کار می‌کند، اما از آن در جاهایی استفاده می‌شود که عناصر در یک سطح از انواع مختلف باشند. به عنوان مثال، اگر در داخل div تعدادی پاراگراف و لینک داشته باشید و بخواهید تمام پاراگراف‌های فرد را انتخاب کنید. nth-child در این سناریو کار نمی‌کند، بنابراین شما از div p: nth-of-type استفاده می‌کنید.
only-of-type: - عنصر را انتخاب می‌کند اگر و فقط اگر یکی از نوع آن در والدین فعلی باشد.
()nth-last-of-type: - این مانند nth-type کار می‌کند، اما از پایین به جای بالا شمارش می‌شود.
()nth-last-child: - این مانند nth-child کار می‌کند، اما از پایین به جای بالا شمارش می‌شود.
بنابراین امیدوارم که شبه کلاس های ساختاری را درک کرده باشید. بیایید سعی کنیم آن‌ها را در style.css خود که قبلا ایجاد کرده‌ایم، اعمال کنیم. ما می‌خواهیم به هر عنصر عجیب و غریب پس زمینه‌ای از slategrey بدهیم. باید آن را به دو روش با دادن خروجی یکسان نشان دهیم.
متد اول: استفاده از :nth-child()
.list-item:nth-child(2n-1){
background-color: slategrey;
}متد دوم: استفاده از :nth-of-type()
.list-item:nth-of-type(odd){
background-color: slategrey;
}سایر سلکتور های شبه کلاس که در این مقاله به جزئیات پرداخته نمی‌شوند عبارتند از:
:enabled
:disabled
:checked
:target
:focus
:required
:optional
:not()
:empty
شبه عناصر
شبه عناصر مربوط به محتوا به طور موثری عناصر جدیدی را ایجاد می‌کند که در نشانه گذاری سند مشخص نشده‌اند و می‌توان آن‌ها را مانند یک عنصر معمولی دستکاری کرد. این مزایای زیادی را برای ایجاد جلوه‌های جالب با حداقل علامت گذاری ارائه می‌دهد، همچنین به جلوگیری از ارائه سند در HTML و در CSS که متعلق به آن است کمک قابل توجهی می‌کند.
تفاوت بین شبه کلاس ها و شبه عناصر
شبه کلاس سلکتوری است که در انتخاب چیزی که توسط یک سلکتور ساده قابل بیان نیست، کمک می‌کند. به عنوان مثال hover. در حالی که یک شبه عنصر به ما امکان می‌دهد مواردی را ایجاد کنیم که به طور معمول در درخت سند وجود ندارد. به عنوان مثال ::after. بنابراین می‌توانید به راحتی یک شبه کلاس را با یک دو نقطه (:) و یک شبه عنصر را با دو دو نقطه (::) مشخص کنید.
شبه عناصر شامل:
::before - این به ما امکان می‌دهد قبل از یک عنصر خاص محتوا اضافه کنیم. به عنوان مثال، اضافه کردن یک کوتیشن مارک (") قبل از نقل قول.
::after - این به ما امکان می دهد بعد از یک عنصر خاص محتوا اضافه کنیم. به عنوان مثال، یک کوتیشن مارک پایانی (") بعد از یک نقل قول. همچنین معمولا برای ایجاد یک فضای خالی بعد از یک عنصر.
::first-letter - این برای اضافه کردن یک استایل به حرف اول سلکتور مشخص شده استفاده می‌شود. به عنوان مثال برای ایجاد یک drop cap.
بنابراین بیایید با استفاده از سلکتور ::after از index.html جلوی هر لینک موجود در لیست، یک بخش ایجاد کنیم. در اینجا یک قطعه کد را به فایل style.css خود اضافه خواهیم کرد.
.list-item::after {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="black" stroke-width="4" stroke-miterlimit="10" d="M4.75 1.5l6.5 6.5-6.5 6.5"/></svg>');
background-size: 8px 8px;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 8px;
margin-left: 4px;
width: 16px;
}شما می‌توانید کد پروژه را از این لینک اجرا کنید.
سخن پایانی
تصمیم‌گیری در مورد انتخاب شبه کلاس ها به پروژه شما بستگی دارد. دانستن نوع پروژه و اسلکتور های CSS موجود به شما در تصمیم‌گیری کمک می‌کند. شبه کلاس های CSS که در این مقاله آورده شده‌اند ممکن است بهترین سلکتور برای استایل‌های شما نباشد، اما می‌تواند ابزار بسیار مهمی در اختیار شما بگذارد، به ویژه برای مواردی که نمی‌توانید به سلکتور شناسه و کلاس اعتماد کنید. به یاد داشته باشید، نوشتن CSS خوب در واقع یافتن کارآمدترین راه برای دستیابی به اهداف یک پروژه است.
امیدوارم با خواندن این مقاله بتوانید گوشه‌ای از مشکلات خود را حل کنید. اگر هرگونه سوال یا نظری دارید، لطفا در بخش زیر با ما در میان بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید