استفاده از ویژگی class برای مشخص کردن یک دسته از عناصر HTML می باشد. چندین عنصر می توانند از یک کلاس یکسان استفاده کنند و همه ویژگی هایی که در آن class تعریف شده باشد روی این عناصر اعمال می شود.
استفاده از ویژگی Class
ویژگی class اغلب برای اشاره به نام یک کلاس در فایل css استفاده می شود.
مثال زیر، سه عنصر < div > با یک ویژگی class با مقدار "city" دارد. هر سه عنصر < div > به طور یکسان بر طبق تعریف استایل city در بخش head استایل داده شده اند:
همانطور که در نتیجه کد بالا مشاهده می کنید، تمام عناصر div که کلاس city را دارند، از یک استایل پیروی کرده و هیچ تفاوتی میان آنها از نظر ظاهر وجود ندارد.
در مثال بعدی ما دو عنصر < span > با یک ویژگی class با مقدار "note" داریم. هر دو عنصر < span > طبق تعریف note در بخش head استایل دهی شده اند:
همانطور که در نتیجه کد مشاهده می کنید، کلاس note باعث دریافت رنگ قرمز و فونت سایز 120% برای همه عناصری که آن کلاس را دریافت کرده اند شده است.
قاعده Class
برای ساخت یک class در HTML، یک نقطه بگذارید و نام کلاس را بنویسید. سپس، مشخصه های CSS را درون آکولاد {} قرار دهید:
که نتیجه کد فوق به شکل زیر است:
استفاده از چندین کلاس برای عناصر HTML
عنصرهای HTML می توانند بیشتر از یک کلاس داشته باشند. برای تعریف کردن چندین کلاس، اسامی کلاس ها را با یک (Space) جدا کنید. مثال: <"div class="city main>. عنصر بر اساس تمام کلاس های مشخص شده استایل داده خواهد شد. یعنی همه ویژگی های CSS که در هریک از کلاس ها تعریف شده باشد را دریافت می کند.
در مثال بعد، اولین عنصر <h2> هم به کلاس city و هم به کلاس main تعلق دارد، و استایل ها را از هر دو کلاس دریافت می کند.
در این مثال مشاهده می کنید که اولین h2 که در آن متن London نوشته شده است، از هر دو کلاس city و main استفاده می کند. بنابراین همه ویژگی های کلاس city به علاوه ویژگی های کلاس main را دریافت کرده است. وجه تمایز این عنصر نسبت به سایر عناصر h2 را می توانید در زیر مشاهده کنید:
عنصرهای متفاوت می توانند از کلاس یکسان استفاده کنند. در مثال بعدی، هم < h2 > و هم <p> به کلاس "city" اشاره دارند و استایل یکسان را سهیم می شوند:
در این مثال مشخص شده که می توان از کلاس یکسان بر روی عناصر متفاوت html استفاده کرد که نتیجه آن در زیر مشخص شده است:
کاربرد ویژگی کلاس در جاوا اسکریپت
نام کلاس می تواند همچنین توسط جاوا اسکریپت و به منظور انجام دادن فعالیت های مشخصی بر روی عناصر به خصوص استفاده شود. جاوا اسکریپت می تواند با یک نام مشخص و با متد ()getElementsByClassName به عنصرها دسترسی داشته باشد:
در این مثال جاوا اسکریپت سعی دارد پس از کلیک شدن روی دکمه، تمام عناصری را که کلاس city دارند را دریافت کرده و در متغیر x ذخیره کند. سپس به همه آن عناصر ویژگی display = none را اختصاص دهد.
و سپس با زدن دکمه ی Hide elements همه عناصری که کلاس city داشتند در صفحه مخفی شوند:
