cssblog.ir logo
S

classs

انتخاب‌ عناصر از طریق نام کلاس در CSS

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

یکی از راه‌هایی بسیار پرکاربرد و متداول برای نوشتن استایل در CSS کلاس‌بندی عناصر و سپس استفاده از آن کلاس‌ها برای دادن استایل‌های مورد نظر می‌باشد.

نحوه انتخاب کلاس‌ها

برای اشاره به کلاس‌ها باید از کارکتر نقطه (دات) استفاده کنیم و سپس نام آن کلاس را بنویسیم. برای مثال:

<button class="btn">button 1</button>
<input type="submit" class="btn" value="button 2" />

در مثال بالا کلاس btn به دو عنصر مختلف شده است که می خواهیم این کلاس باعث شود تا این مشخصه ها را داشته باشند:

.btn {
	cursor: pointer;
	border: none;
	background: #e0e0e0;
	color: #888;
}

به زبان تشریحی: ما تمام دکمه های وبسایت را در کلاس btn قرار می دهیم چون می‌خواهیم یک سری ویژگی‌های مشترک را همه آنها داشته باشند.

آیا یک عنصر می تواند چند کلاس داشته باشد؟

بله! حتما! شما می توانید کلاس ها را با استفاده از فاصله (space) جدا کنید و به عنصر بدهید.

<div class="class1 class-name2 class3 class4"></div>

از چه کارکترهایی می‌توان استفاده نمود؟

نام کلاس‌های شما می توانند با حروف الفبا، خط تیره (-) و یا underscore (یعنی _) شروع شوند. شما می‌توانید از اعداد در نام کلاس استفاده کنید اما اعداد نمی‌توانند کارکتر آغازین آن باشند.

استفاده در کنار سایر سلکتورها

طبیعتا مانند سایر سلکتورهای CSS ما می توانیم از کلاس در کنار سایر سلکتور ها استفاده کنیم.

مثال: کلاس thumbnail برای تصاویر بند انگشتی استفاده می‌شود. اما ما می‌خواهیم اگر این کلاس روی تگ img بکار رفته بود یک مقدار padding هم اضافه شود. با این حساب، CSS ما به این شکل خواهد بود:

.thumbnail {
	border: 1px solid #e0e0e0;
}
img.thumbnail {
	padding: 10px;
}


تفاوت ID و کلاس

اگر با ID هم آشنایی دارید و علاقه‌مند هستید تا تفاوت آن را با کلاس بدانید می توانید این مطلب را نیز مطالعه کنید.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند