انتخابگرهای CSS بخش مهمی از دنیای توسعه وب هستند و با وجود این که ساده به نظر می‌رسند، قدرت زیادی در اختیار طراحان و توسعه‌دهندگان قرار می‌دهند. انتخابگرها مسئول تعیین این هستند که کدام بخش از HTML ما توسط استایل‌ها تحت تأثیر قرار گیرند.
اولین نکته‌ای که باید در رابطه با انتخابگرها بدانید این است که آنها انواع مختلفی دارند؛ از انتخابگرهای تگ و کلاس گرفته تا انتخابگرهای ID و انتخابگرهای تو در تو. هر یک از این انتخابگرها مزایا و کاربردهای خاص خود را دارند.
برای مثال، اگر بخواهید سبک خاصی را به همه پاراگراف‌های صفحه وب اختصاص دهید، می‌توانید از انتخابگر تگ استفاده کنید. اگر ترجیح می‌دهید که فقط پاراگراف‌های مشخصی را تغییر دهید، انتخابگر کلاس بهترین انتخاب خواهد بود.
همچنین، انتخابگرهای تو در تو بسیار قدرتمندتر از انتخابگرهای ساده هستند و اجازه می‌دهند تا با دقت بیشتری استایل‌ها را به عناصر مختلف اختصاص دهیم.
مثالی از استفاده از انتخابگرها
<!-- HTML Code -->
<div class="container">
<h1 class="title">Welcome to My Site</h1>
<p class="intro">This is an example of a simple CSS selector.</p>
</div>
/* CSS Code */
.title {
font-size: 2em;
color: blue;
}
.intro {
font-size: 1em;
color: gray;
}
توضیح کد بالا
<div class="container"> - این یک عنصر div با کلاس container است که تمام محتوا در آن قرار دارد.
<h1 class="title"> - یک عنصر h1 با کلاس title که متنی با اندازه بزرگ‌تر و رنگ آبی دارد.
<p class="intro"> - این یک پاراگراف با کلاس intro است که استایل آن متفاوت از سایر پاراگراف‌ها تنظیم شده است.
.title { font-size: 2em; color: blue; } - این بخش از CSS به انتخابگر کلاس .title اشاره می‌کند و اندازه‌ی فونت را دو برابر می‌کند و رنگ آن را آبی می‌کند.
.intro { font-size: 1em; color: gray; } - این استایل اندازه‌ی اصلی فونت را برای کلاس .intro تنظیم کرده و رنگ را خاکستری می‌نماید.