صفت class در HTML

از ویژگی calss در HTML برای تعیین کلاس برای یک عنصر HTML استفاده می شود.

چندین عنصر HTML می توانند در یک کلاس مشترک باشند.

 

با استفاده از ویژگی کلاس

از ویژگی class اغلب برای نشان دادن نام class در یک صفحه سبک استفاده می شود. همچنین می تواند توسط JavaScript برای دسترسی و دستکاری عناصر با نام کلاس خاص استفاده شود.

در مثال زیر سه عنصر <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>لندن</h2>
  <p>لندن پایتخت انگلستان است</p>
</div>

<div class="city">
  <h2>پاریس</h2>
  <p>پاریس پایتخت فرانسه ایت</p>
</div>

<div class="city">
  <h2>تهران</h2>
  <p>تهران پایتخت ایران است</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 استفاده کرد.

توجه: نام class به حروف کوچک و بزرگ حساس است!

 

نحو class

ایجاد class؛ یک کاراکتر دوره (.) بنویسید و به دنبال آن یک نام class قرار دهید. سپس ، ویژگی های CSS را در پرانتزهای حلقه ای تعریف کنید {}:

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است</p>

<h2 class="city">پاریس</h2>
<p>پاریس پایتخت فرانسه است</p>

<h2 class="city">تهران</h2>
<p>تهران پایتخت ایران است</p>

</body>
</html>
امتحان کنید

 

class های چندگانه

عناصر HTML می توانند به بیش از یک کلاس تعلق داشته باشند.

برای تعریف چندین کلاس ، نام کلاس ها را با فاصله جدا کنید ، به عنوان مثال <div class = "city main">. این عنصر با توجه به تمام کلاسهای مشخص شده سبک می شود.

در مثال زیر ، اولین عنصر <h2> هم به کلاس شهر و هم به کلاس اصلی تعلق دارد و سبک های CSS را از هر دو کلاس دریافت می کند:

<h2 class="city main">لندن</h2>
<h2 class="city">پاریس</h2>
<h2 class="city">تهران</h2>
امتحان کنید

 

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

عناصر مختلف HTML می توانند به همان نام کلاس اشاره کنند.

در مثال زیر ، هر دو <h2> و <p> به کلاس "city" اشاره می کنند و از همان سبک استفاده می کنند:

<h2 class="city">تهران</h2>
<p class="city">تهران پایتخت ایران است</p>
امتحان کنید

 

استفاده از ویژگی کلاس در JavaScript

نام کلاس همچنین می تواند توسط JavaScript برای انجام کارهای خاص برای عناصر خاص استفاده شود.

JavaScript می تواند به عناصر دارای یک کلاس خاص با استفاده از متد getElementsByClassName () دسترسی پیدا کند:

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
امتحان کنید