سلکتور کلاس (Class selector) یکی از انواع رایج سلکتورها یا گزینشگرها در CSS به شمار میرود. این نوع سلکتورها المان هایی با یک کلاس مشخص را برای تعیین استایل سیاساس انتخاب میکنند.
بیشتر بخوانید: آشنایی با کلاس ها و خصوصیت class در HTML
بیشتر بخوانید: آشنایی با سلکتورها و انواع آنها در CSS
شیوه درج و استفاده از سلکتور کلاس در CSS
در سلکتورهای کلاس، ابتدا یک نقطه (یا .) و سپس نام کلاس درج میشود. به این ترتیب تمام المانهایی در سند که دارای کلاس موردنظر هستند انتخاب میشوند. سینتکس کلی یک قانون با یک سلکتور کلاس به صورت زیر است:
.class-name {
...
}فراموش نکنید ممکن است یک یا چند المان با نوعهای متفاوت دارای کلاس یکسان باشند. سلکتور کلاس در حالت ساده بدون توجه به نوع المان، هر المانی که دارای کلاس مشخص شده باشد را انتخاب میکند.
مثال
به عنوان یک مثال ساده برای انتخاب تمام المان های دارای کلاس blue-text میتوانید مشابه با نمونه زیر از گزینشگر .blue-text استفاده کنید. با توجه به بخش گزینشگرها و اظهاریه در این مثال، رنگ متن تمام این المان ها روی آبی تنظیم میشود.
.blue-text {
color: blue;
}برای انتخاب تمام المان های دارای کلاس orange-bg هم میتوانید مشابه با نمونه زیر از سلکتور .orange-bg استفاده کنید. با توجه به سلکتور کلاس و بخش اظهاریه در این قانون CSS، رنگ زمینه تمام این المان ها روی نارنجی تنظیم میشود.
.orange-bg {
background: orange;
}فرض کنید در بخش بدنه (یا <body>) سند HTML، یک هدینگ سطح دو (یا المان <h2>) و یک پاراگراف (یا المان <p>) شامل دو المان <span> مشابه با نمونه زیر وجود دارد.
<h2 class="blue-text">My Heading</h2>
<p><span>This is</span> a simple <span class="blue-text orange-bg">paragraph</span>.</p>در ادامه، نتیجه اعمال دو قانون CSS فوق روی این صفحه ساده HTML را مشاهده میکنید. با توجه به نتیجه، متن المان <h2> و دومین المان <span> که هر دو کلاس blue-text دارند با رنگ آبی نمایش داده میشود. از آنجایی که دومین المان <span> علاوه بر کلاس blue-text دارای کلاس orange-bg نیز میباشد زمینه این المان با رنگ نارنجی مشخص میشود.
بازگشت به فهرست مجموعه آموزشی CSS
