صفت class در HTML برای مشخص کردن یک کلاس برای یک عنصر HTML به کار می‌رود. چندین عنصر HTML می‌توانند یک کلاس مشترک داشته باشند.
صفت class اغلب برای اشاره به یک نام کلاس در یک شیوه‌نامه (style sheet) استفاده می‌شود. همچنین جاوا اسکریپت می‌تواند از آن برای دسترسی و دستکاری عناصری با نام کلاس مشخص استفاده کند.
در مثال زیر، ما سه عنصر <div> داریم که همگی دارای صفت class با مقدار "city" هستند. هر سه عنصر <div> بر اساس تعریف استایل .city در بخش <head>، به شکل یکسانی استایل‌دهی خواهند شد:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>در مثال زیر، دو عنصر
<span> با صفت class و مقدار "note" داریم. هر دو عنصر <span> طبق تعریف استایل .note در بخش <head> به طور یکسان استایل‌دهی می‌شوند:
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>نکته: صفت class را می‌توان بر روی هر عنصر HTML به کار برد.
توجه: نام کلاس به بزرگی و کوچکی حروف حساس است (case sensitive)!
نکته: شما می‌توانید در آموزش CSS ما اطلاعات بسیار بیشتری در مورد CSS بیاموزید.
تبلیغات
برای ایجاد یک کلاس، یک کاراکتر نقطه (.) و به دنبال آن نام کلاس را بنویسید. سپس، خصوصیات CSS را درون آکولادهای {} تعریف کنید:
ایجاد یک کلاس به نام "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>عناصر HTML می‌توانند به بیش از یک کلاس تعلق داشته باشند.
برای تعریف چندین کلاس، نام کلاس‌ها را با یک فاصله از هم جدا کنید، برای مثال: <div class="city main">. عنصر مورد نظر بر اساس تمام کلاس‌های مشخص شده استایل‌دهی خواهد شد.
در مثال زیر، اولین عنصر <h2> هم به کلاس city و هم به کلاس main تعلق دارد و استایل‌های CSS را از هر دو کلاس دریافت خواهد کرد:
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>عناصر مختلف HTML می‌توانند به یک نام کلاس یکسان اشاره کنند.
در مثال زیر، هر دو عنصر <h2> و <p> به کلاس "city" اشاره می‌کنند و استایل یکسانی را به اشتراک خواهند گذاشت:
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>نام کلاس همچنین می‌تواند توسط جاوا اسکریپت برای انجام وظایف خاصی روی عناصر مشخصی استفاده شود.
جاوا اسکریپت می‌تواند با استفاده از متد getElementsByClassName() به عناصری با نام کلاس معین دسترسی پیدا کند:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>نگران نباشید اگر کد مثال بالا را متوجه نمی‌شوید.
شما در فصل جاوا اسکریپت HTML ما بیشتر در مورد جاوا اسکریپت یاد خواهید گرفت، یا می‌توانید آموزش جاوا اسکریپت ما را مطالعه کنید.
صفت class در HTML یک یا چند نام کلاس را برای یک عنصر مشخص می‌کند.
کلاس‌ها توسط CSS و جاوا اسکریپت برای انتخاب و دسترسی به عناصر خاص استفاده می‌شوند.
صفت class می‌تواند روی هر عنصر HTML استفاده شود.
نام کلاس به بزرگی و کوچکی حروف حساس است.
عناصر مختلف HTML می‌توانند به یک نام کلاس یکسان اشاره کنند.
جاوا اسکریپت می‌تواند با متد getElementsByClassName() به عناصری با نام کلاس مشخص دسترسی پیدا کند.
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/