CSS یا cascading style sheets یکی از مهم‌ترین و کاربردی‌ترین تکنولوژی‌ها در طراحی وب است. با استفاده از CSS می‌توانیم ظاهر و استایل صفحات وب را به صورت کاملاً منعطف وسازگار با نیازهای خود تعیین کنیم. یکی از مفاهیم کلیدی در CSS، سلکتورها هستند. سلکتورها به ما اجازه می‌دهند تا عناصر مشخصی در HTML را هدف قرار دهیم و برای آنها استایل‌های خاصی تعریف کنیم.
سلکتورهای CSS به شما قدرت زیادی می‌دهند تا با استفاده از ترکیب‌های مختلفی از سلکتورها، دقیقاً عناصر مورد نظر خود را هدف‌گذاری کنید. این هدف‌گذاری می‌تواند براساس نوع، کلاس، شناسنامه (id)، و یا حتی وضعیت خاصی از عناصر باشد. در این میان، سلکتورهای pseudo که به سلکتورهای "جعلی" نیز معروفند، به شما این امکان را می‌دهند که افزون بر حالت‌های استاندارد، حالت‌های مختلف و ظریف‌تری مثل حالت وقتی که موس روی یک عنصر قرار گرفت (hover) یا زمانی که یک لینک بازدید شده است (visited) را هدف قرار دهید.
فرض کنید یک پروژه وب در دست دارید و می‌خواهید تا استایل خاصی برای وقتی که کاربر روی یک دکمه موس را می‌برد، تعیین کنید. این دقیقاً جایی است که سلکتورهای pseudo مثل :hover به کمکتان می‌آید. در ادامه مثالی از این کاربرد آورده شده است.
یکی از قدرت‌های بزرگ CSS در امکان ترکیب سلکتورها است. شما می‌توانید از ترکیب کلاس‌ها، idها، و سلکتورهای pseudo برای رسیدن به استایل‌های بسیار دقیق‌تر و پیشرفته‌تر استفاده کنید. این ترکیب‌ها گاهی اوقات امکان می‌دهد که کدی تمیزتر و نگهداری‌پذیرتر داشته باشیم.
سلکتورهای :past را نمی‌توان به طور مستقیم در CSS استفاده کرد، اما می‌توانیم از سلکتورهای موجود، برای کارکردهای مشابه استفاده کنیم. با استفاده از سلکتورهای pseudo مثل :visited یا :hover می‌توانیم بخش‌هایی از وب را که بازدید شده‌اند یا هنگامه تعامل کاربر با آنها تغییر کند، هدف‌گذاری کنیم.
پس در پروژه‌های روزمره خود، همیشه به این نکته توجه داشته باشید که با ترکیب سلکتورها می‌توانید به نتایج پیچیده و حرفه‌ای‌تری برسید. همین سلکتورهای ساده‌ای مثل :hover یا :visited قدرت‌های فراوانی به طراحان داده‌اند.
کد مثال: استفاده از سلکتورهای CSS
<!DOCTYPE html>\r\n<html lang="fa">\r\n<head>\r\n <meta charset="UTF-8">\r\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n <title>مثال سلکتورهای CSS</title>\r\n <style>\r\n a {\r\n text-decoration: none;\r\n color: blue;\r\n }\r\n a:hover {\r\n color: red;\r\n }\r\n a:visited {\r\n color: purple;\r\n }\r\n </style>\r\n</head>\r\n<body>\r\n <a href="#">لینک مثال</a>\r\n</body>\r\n</html>\r\nتوضیح کد خط به خط
<!DOCTYPE html>: این خط نشان‌دهنده‌ی نوع سند HTML است که به مرورگر می‌گوید که با یک سند HTML5 روبرو است.
<html lang="fa">: این تگ نشان‌دهنده‌ی شروع سند HTML است و زبان آن را فارسی تعریف می‌کند.
<meta charset="UTF-8">: این خط مشخص می‌کند که از چه نوع کدگذاری‌ای برای نمایش حروف استفاده شده است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: این خط برای تنظیم صفحه با اندازه صفحه نمایش دستگاه های مختلف است.
<title>مثال سلکتورهای CSS</title>: عنوان صفحه که در تب مرورگر نمایش داده می‌شود.
<style> to </style>: این بخش شامل کدهای CSS است که برای استایل دادن به عناصر HTML تعریف شده است.
a: سلکتوری که برای تمامی تگ‌های <a> در سند HTML استفاده شده است.
text-decoration: none;: این ویژگی به ما اجازه می‌دهد که زیرخط‌های پیش‌فرضی که برای لینک‌ها استفاده می‌شود را حذف کنیم.
color: blue;: تعیین رنگ آبی برای متن لینک‌ها.
a:hover: این سلکتور زمانی اعمال می‌شود که کاربر ماوس خود را بر روی یک لینک ببرد.
color: red;: هنگام نشان‌دادن ماوس روی لینک، رنگ متن به قرمز تغییر می‌کند.
a:visited: این سلکتور برای لینک‌های بازدیدشده اعمال می‌شود.
color: purple;: رنگ لینک‌های بازدید شده به بنفش تغییر می‌کند.
<body> to </body>: این بخش برای نمایش محتوای اصلی صفحه HTML است.
<a href="#">لینک مثال</a>: یک لینک نمونه که با استفاده از خاصیت href به قسمتی دیگر از صفحه یا صفحات دیگر اشاره می‌کند.