گروهبندی عناصر با ویژگی class
ویژگی class به شما اجازه میدهد یک نام دلخواه روی یک یا چند عنصر بگذارید تا بتوانید بعداً همهی آنها را با هم، از طریق CSS یا جاوااسکریپت، هدف قرار دهید.
class-basic.html
<p class="note">این یک یادداشت است.</p> <p class="note">این هم یک یادداشت دیگر است.</p>
برخلاف id که باید در یک صفحه یکتا باشد، یک نام کلاس میتواند روی هر تعداد عنصر که بخواهید تکرار شود؛ و هر عنصر هم میتواند بیش از یک کلاس داشته باشد که با فاصله از هم جدا میشوند.
multiple-classes.html
<p class="note important">این یادداشت هم مهم است، هم یادداشت است.</p>
استفاده از کلاس در CSS
برای انتخاب عناصری با یک کلاس خاص در CSS، قبل از نام کلاس یک نقطه قرار میگیرد.
style.css
.note {
background-color: #fff8dc;
border-inline-start: 4px solid orange;
padding: 10px;
}
استفاده از کلاس در جاوااسکریپت
متد getElementsByClassName() یکی از راههای رایج برای دسترسی به تمام عناصر دارای یک کلاس خاص از طریق جاوااسکریپت است.
نکته: نامگذاری کلاسها بهتر است بر اساس نقش یا معنای آن بخش باشد (مثل
note یا card)، نه بر اساس ظاهر آن (مثل red-text)، چون ظاهر ممکن است در آینده تغییر کند.