شرح انتخاب‌گرهای کلاس CSS

انتخاب‌کننده کلاس اجازه می‌دهد که استایل‌ها به یک روش مستقل از عناصر مستندات مشخص شود.

انتخاب‌گرهای کلاس CSS

انتخاب‌کننده کلاس اجازه می‌دهد که استایل‌ها به یک روش مستقل از عناصر مستندات مشخص شود.

این انتخاب‌کننده می‌تواند به تنهایی استفاده شود یا با عناصر دیگر ترکیب شود.

توضیح:تنها پس از برچسب‌گذاری مناسب مستندات می‌توان از این انتخاب‌کنندگان استفاده کرد، بنابراین استفاده از این دو انتخاب‌کننده معمولاً نیاز به برخی تصورات و برنامه‌ریزی دارد.

یکی از متداول‌ترین روش‌ها برای اعمال استایل بدون توجه به عناصر طراحی شده، استفاده از انتخاب‌کننده کلاس است.

تغییر کد HTML

قبل از استفاده از انتخاب‌کننده کلاس، نیاز است که نشانه‌گذاری مستندات مشخص شود تا انتخاب‌کننده کلاس به درستی کار کند.

برای اتصال استایل‌های انتخاب‌کننده کلاس به عناصر، باید کلاس را به یک مقدار مناسب اختصاص دهید. به کد HTML زیر نگاه کنید:

<h1 class="important">
این عنوان بسیار مهم است.
</h1>
<p class="important">
این پاراگراف بسیار مهم است.
</p>

در کد بالا، کلاس دو عنصر مشخص شده است: اولین عنوان (عنصر h1) و دومین پاراگراف (عنصر p).

نحوه‌ی نوشتن

سپس ما از این نحوه استفاده می‌کنیم تا به عناصر طبقه‌بندی شده، استایل اعمال کنیم، یعنی یک نقطه (.) قبل از نام class و ترکیب با انتخاب‌گر کلی:

*.important {color:red;}

اگر فقط می‌خواهید عناصر با نام class مشابه انتخاب کنید، می‌توانید از انتخاب‌گرهای کلی ( wildcard selectors ) در انتخاب‌گرهای class نادیده بگیرید، این هیچ تأثیری ندارد:

.important {color:red;}

آزمایش کنید

ترکیب با انتخاب‌گرهای عناصر

انتخاب‌گرهای نوع می‌توانند با انتخاب‌گرهای عناصر ترکیب شوند.

مثلاً، ممکن است بخواهید فقط پاراگراف‌ها به رنگ قرمز نمایش داده شوند:

p.important {color:red;}

انتخاب‌گر اکنون با عناصر p که دارای attribute class با مقدار important هستند، مطابقت می‌کند، اما با هر نوع عناصر دیگر که این attribute را دارند، مطابقت نمی‌کند. انتخاب‌گر p.important به این صورت تفسیر می‌شود: «تمام عناصر پاراگراف که attribute class با مقدار important دارند». زیرا عنصر h1 یک پاراگراف نیست، این انتخاب‌گر با آن مطابقت نمی‌کند، بنابراین عنصر h1 به رنگ قرمز تبدیل نمی‌شود.

اگر واقعاً می‌خواهید برای عنصر h1 یک سبک متفاوت تعیین کنید، می‌توانید از انتخاب‌گر h1.important استفاده کنید:

p.important {color:red;}
h1.important {color:blue;}

آزمایش کنید

انتخاب‌گرهای چند نوع CSS

در بخش قبلی، ما با حالت class که شامل یک کلمه است، کار کردیم. در HTML، یک حالت class ممکن است شامل یک لیست کلمات باشد که با فضای خالی از یکدیگر جدا شده‌اند. به عنوان مثال، اگر بخواهید یک عنصر خاص را هم به عنوان مهم (important) و هم به عنوان هشدار (warning) برچسب‌گذاری کنید، می‌توانید بنویسید:

<p class="important warning">
این پاراگراف یک هشدار بسیار مهم است.
</p>

ترتیب این دو کلمه مهم نیست، می‌توان آن را به صورت warning important نوشت.

ما فرض می‌کنیم که تمام عناصر با class important همه‌چیز تیره هستند، و تمام عناصر با class warning همه‌چیز خمیده هستند، و تمام عناصر که هم شامل important و هم شامل warning هستند یک پس‌زمینه نقره‌ای دارند. می‌توان نوشت:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

آزمایش کنید

با اتصال دو انتخاب‌گر نوع، تنها می‌توان انتخاب کردهمزمان شامل این نام‌های کلاس}عناصر (ترتیب نام‌های کلاس مهم نیست).

اگر یک انتخاب‌گر چند کلاس شامل یک نام کلاس نباشد که در لیست نام‌های کلاس وجود ندارد، تطبیق شکست خواهد خورد. به قوانین زیر نگاه کنید:

.important.urgent {background:silver;}

به طور پیش‌بینی‌پذیر، این انتخاب‌گر تنها عناصر p که ویژگی class شامل کلمات important و urgent را دارد را تطبیق می‌دهد. بنابراین، اگر ویژگی class یک عنصر p شامل کلمات important و warning باشد، تطبیق نخواهد شد. اما می‌تواند با عناصر زیر تطبیق یابد:

<p class="important urgent warning">
این پاراگراف یک هشدار بسیار مهم و فوری است.
</p>

آزمایش کنید

موضوع مهم:در نسخه‌های قبل از IE7، مرورگرهای Internet Explorer در پلتفرم‌های مختلف نمی‌توانند انتخاب‌گرهای چند کلاس را به درستی پردازش کنند.