انتخاب‌گرهای CSS یکی از قدرتمندترین امکاناتی هستند که به طراحان وب می‌چسبد. با استفاده از انتخابگرها، می‌توانید به سادگی به اجزای خاصی از صفحه وب دسترسی پیدا کنید و استایل‌های خاصی را فقط به آن‌ها اختصاص دهید. یکی از انتخاب‌گرهای مهم، انتخاب‌گر حالت یا :state می‌باشد که کاربردهای زیادی دارد. این انتخاب‌گر به ما اجازه می‌دهد تا بر اساس حالت‌های مختلف یک عنصر، استایل‌دهی انجام دهیم. حالت‌هایی مثل hover, focus, active و visited بسیار رایج هستند و در طراحی یک تجربه کاربری پویا و جذاب نقش مهمی ایفا می‌کنند.
برای مثال، تصور کنید که دکمه‌ای روی صفحه داریم که هنگام هاور کردن، رنگش تغییر کند. این کار به سادگی با انتخاب‌گر :hover امکان‌پذیر است. حتی پیچیدگی‌های بیشتری را هم می‌توانیم با ترکیب انتخابگرها و pseudo-class ها به وجود بیاوریم. هدف این است که بتوانیم با استفاده از CSS حالتی ایجاد کنیم که حس تعاملی تری به کاربر القا کند.
انتخاب‌گر :focus یکی از انتخاب‌گرهای پرکاربرد برای استایل‌دهی عناصر فرم مثل فیلدهای ورودی است. این انتخاب‌گر زمانی که یک عنصر در فوکوس قرار می‌گیرد، به کار می‌آید. به عبارت دیگر، هنگامی که کاربر بر روی یک فیلد کلیک می‌کند و آن را فعال می‌کند، استایل آن تغییر می‌کند. این ویژگی باعث می‌شود تا کاربر به راحتی متوجه شود که کدام فیلد فعال است و بدون نیاز به یادآوری، فرم‌ها را پر کند.
انتخاب‌گر :active نیز در زمان کلیک شدن روی یک عنصر، به کار می‌آید. این انتخاب‌گر به ما اجازه می‌دهد تا برای لحظه‌ای که کاربر بر روی دکمه‌ای کلیک می‌کند، یک حالت خاص استایل‌دهی تعریف کنیم. این قابلیت می‌تواند به تجربه کاربری واقع‌گرایانه‌تر و فهم بهتر تعامل با عناصر کمک کند.
button:hover {
background-color: #ddd;
color: black;
}
input:focus {
border: 2px solid #555;
}
a:active {
color: red;
}
button:hover
این انتخاب‌گر بر روی دکمه‌ها زمانی که ماوس بر روی آن می‌آید، اعمال می‌شود.
در اینجا، پس‌زمینه دکمه زمانی که ماوس روی آن قرار دارد تغییر می‌کند.
input:focus
این انتخاب‌گر بر روی فیلدهای ورودی وقتی که در فوکوس قرار می‌گیرند، اعمال می‌شود.
در اینجا، وقتی کاربر بر روی فیلد ورودی کلیک می‌کند، مرز آن تغییر می‌یابد.
a:active
این انتخاب‌گر بر روی لینک‌ها هنگامی که کاربر روی آن‌ها کلیک می‌کند، اعمال می‌شود.
رنگ لینک در لحظه کلیک به قرمز تغییر می‌کند.