سلکتور کلاس در CSS
سلکتور کلاس (Class selector) یکی از انواع رایج سلکتورها یا گزینشگرها در CSS به شمار میرود. این نوع سلکتورها المان هایی با یک کلاس مشخص را برای تعیین استایل سیاساس انتخاب میکنند.
شیوه درج و استفاده از سلکتور کلاس در CSS
در سلکتورهای کلاس، ابتدا یک نقطه (یا .) و سپس نام کلاس درج میشود. به این ترتیب تمام المانهایی در سند که دارای کلاس موردنظر هستند انتخاب میشوند. سینتکس کلی یک قانون با یک سلکتور کلاس به صورت زیر است:
.class-name {
...
}
فراموش نکنید ممکن است یک یا چند المان با نوعهای متفاوت دارای کلاس یکسان باشند. سلکتور کلاس در حالت ساده بدون توجه به نوع المان، هر المانی که دارای کلاس مشخص شده باشد را انتخاب میکند.
بیشتر بخوانید: آشنایی با کلاس ها و خصوصیت class در HTML
مثال
به عنوان یک مثال ساده برای انتخاب تمام المان های دارای کلاس 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 و انواع Selector ها
بازگشت به فهرست مجموعه آموزشی CSS