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

در CSS، انتخاب‌کننده‌های کلاسی با یک نقطه نمایش داده می‌شوند:

.center {text-align: center}

در مثال بالا، تمام عناصر HTML دارای کلاس center به صورت وسط قرار دارند.

در کد HTML زیر، عناصر h1 و p دارای کلاس center هستند. این به این معناست که هر دو از قوانین انتخاب‌کننده ".center" پیروی خواهند کرد.

<h1 class="center">
این عنوان نیز به صورت وسط قرار داده خواهد شد
</h1>
<p class="center">
این پاراگراف نیز به صورت وسط قرار داده خواهد شد.
</p>

توجه داشته باشید:اولین کاراکتر نام کلاس نمی‌تواند عدد باشد! این کاراکتر در Mozilla یا Firefox عمل نمی‌کند.

مانند id، class نیز می‌تواند به عنوان یک انتخاب‌کننده مشتق استفاده شود:

.fancy td {
	رنگ: #f60;
	پس‌زمینه: #666;
	}

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

عناصر نیز می‌توانند بر اساس کلاس خود انتخاب شوند:}

td.fancy {
	رنگ: #f60;
	پس‌زمینه: #666;
	}

در مثال بالا، سلول جدول با نام کلاس fancy دارای پس‌زمینه نارنجی با رنگ خاکستری خواهد بود.

<td class="fancy">

می‌توانید کلاس fancy را به هر عنصر جدول به تعداد دلخواه اختصاص دهید. سلول‌هایی که با نام fancy برچسب‌گذاری شده‌اند، دارای پس‌زمینه نارنجی با رنگ خاکستری خواهند بود. سلول‌هایی که کلاس fancy را به نام fancy اختصاص نداده‌اند، تحت تأثیر این قوانین قرار نمی‌گیرند. همچنین، پاراگراف‌هایی که کلاس fancy دارند، نیز دارای پس‌زمینه نارنجی با رنگ خاکستری نخواهند بود و هر عنصر دیگری که با نام fancy برچسب‌گذاری شده باشد، نیز تحت تأثیر این قوانین قرار نمی‌گیرد. این به دلیل روشی است که ما این قوانین را نوشته‌ایم و این اثر محدود به سلول‌های جدول برچسب‌گذاری شده با fancy (یعنی استفاده از عناصر td برای انتخاب کلاس fancy) است.

محتوای مرتبط

اگر می‌خواهید اطلاعات بیشتری در مورد انتخاب‌گرهای کلاس بدست آورید، لطفاً آموزش‌های پیشرفته CodeW3C.com را بخوانید:توضیحات انتخاب‌گرهای کلاس CSS.