- satu, class adalah atribut yang digunakan untuk menentukan satu atau lebih nama class untuk elemen html.
- dua, atribut class dapat digunakan pada elemen html apapun.
- tiga, nama class dapat digunakan oleh CSS dan JavaScript untuk melaksanakan tugas tertentu untuk elemen dengan nama class spesifik.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
.country
{
background-color: black;
color: white;
padding: 8px;}
</style>
</head>
<body>
<h2 class="country">
CHINA
</h2>
<p>
Cina adalah negara dengan
populasi yang banyak.
</p>
<h2 class="country">
INDIA
</h2>
<p>
India adalah negara dengan
kaum dalit terbanyak.
</p>
<h2 class="country">
UNITED STATES
</h2>
<p>
Amerika adalah negara dengan
jumlah tentara yang banyak.
</p>
</body>
</html>
CHINA
Cina adalah negara dengan populasi yang banyak.
INDIA
India adalah negara dengan kaum dalit terbanyak.
UNITED STATES
Amerika adalah negara dengan jumlah tentara yang banyak.
Penjelasan: pada contoh program sebelumnya, adalah contoh elemen CSS style dengan nama class "country".
Menggunakan atribut class pada JavaScript: JavaScript dapat mengakses elemen dengan menentukan nama class menggunakan method getElemenByClassName().
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x = document.getElementsByClassName("country");
for (var i = 0; i < x.length; i++)
{x[i].style.display = "none";}
}
</script>
</head>
<body>
<p>
Klik, maka elemen akan
disembunyikan.
</p>
<button
onclick="myFunction()">
Hide elements
</button>
<h2 class="country">
CHINA
</h2>
<p>
Cina adalah negara dengan
jumlah populasi terbesar.
</p>
<h2 class="country">
INDIA</h2>
<p>
Indika adalah negara dengan
jumlah kaum dalit terbanyak.
</p>
<h2 class="country">
UNITED STATES</h2>
<p>
Amerika adalah negara yang
damai.
</p>
</body>
</html>
Klik, maka elemen akan disembunyikan.
CHINA
Cina adalah negara dengan jumlah populasi terbesar.
INDIA
Indika adalah negara dengan jumlah kaum dalit terbanyak.
UNITED STATES
Amerika adalah negara yang damai.
Contoh:
<!DOCTYPE html>
<html>
<style>
.country
{
background-color: black;
color: white;
padding: 10px;}
.middle
{
text-align: center;}
</style>
<body>
<h2 class="country middle">
CHINA
</h2>
<h2 class="country">
INDIA
</h2>
<h2 class="country">
UNITED STATES
</h2>
</body>
</html>
CHINA
INDIA
UNITED STATES
Penjelasan: Ketiga header memiliki nama class "country", tetapi pada penambahannya, CHINA juga memiliki nama class "middle", yang membuat teks menjadi rata tengah.
Menggunakan class yang sama pada tag yang berbeda: perbedaan tag seperti <h2> dan <p>, dapat diberikan nama class yang sama dan dapat berbagi style yang sama.
Contoh:
<!DOCTYPE html>
<html>
<style>
.country
{
background-color: black;
color: white;
padding: 10px;}
</style>
<body>
<h2 class="country">
CHINA
</h2>
<p class="country">
Cina adalah negara yang besar.
</p>
</body>
</html>
CHINA
Cina adalah negara yang besar.
Penjelasan: Meskipun dua elemen tidak memiliki tag name yang sama, tetapi elemen tersebut dapat memiliki nama class yang sama dan mendapat style yang sama pula.
Bagaimana cara membuat class pada html?
BalasHapusUntuk memilih elemen dengan class tertentu pada html, ketik karakter titik (.), yang diikuti dengan nama class. User juga dapat menentukan bahwa hanya elemen HTML tertentu saja yang dapat terpengaruh oleh kelas yang telah dibuat tersebut.
HapusApa perbedaan antara atritbut ID dan atribut CLASS pada HTML?
BalasHapusPerbedaan antara atribut ID dan atribut Class pada html, adalah atribut ID bersifat unik hanya alam satu halaman tertentu saja, dan paling banyak dapat diterapkan pada satu elemen dalam dokumen html, sedangkan class dapat diterapkan paa beberapa elemen dalam dokumen html.
HapusApa yang dimaksud dengan class pada html dan css?
BalasHapusClass CSS merupakan atribut yang digunakan untuk mendefinisikan sekelompok elemen HTML guna diterapkan suatu pemformatan unik tertentu ke dalam elemen tersebut melalui kode CSS. Grup ini dapat berisi lebih satu jenis elemen ataupun lebih. Atribut class tidak memengaruhi makna semantik dari dokumen HTML itu sendiri.
Hapus