تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

سلکتور کلاس یا CSS selector در CSS
سی‌اس‌اس 

سلکتور کلاس در CSS

امیرحسین شهسواری 0 دیدگاه ،،،،،،

سلکتور کلاس (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 با کمک سلکتور کلاس

بیشتر بخوانید: آشنایی با گزینشگر یا سلکتور در CSS و انواع Selector ها

بازگشت به فهرست مجموعه آموزشی CSS

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.