انتخاب‌گرهای کلاس 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 {
	color: #f60;
	background: #666;
	}

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

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

td.fancy {
	color: #f60;
	background: #666;
	}

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

<td class="fancy">

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

محتوای مرتبط

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