صفت classدر HTML

صفت class در HTML

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

صفت class

صفت 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 بیاموزید.

تبلیغات

نحو (Syntax) تعریف کلاس

برای ایجاد یک کلاس، یک کاراکتر نقطه (.) و به دنبال آن نام کلاس را بنویسید. سپس، خصوصیات 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>

استفاده از صفت class در جاوا اسکریپت

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

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

مثال

روی یک دکمه کلیک کنید تا تمام عناصری که نام کلاس "city" را دارند، پنهان شوند:

<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() به عناصری با نام کلاس مشخص دسترسی پیدا کند.

<!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>

<!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>

<!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>