Atribut Class HTML


Atribut class HTML digunakan untuk menentukan class untuk elemen HTML.

Beberapa elemen HTML dapat berbagi class yang sama.


Menggunakan Atribut Class

Atribut class sering digunakan untuk menunjuk ke nama class di CSS. Ini juga dapat digunakan oleh JavaScript untuk mengakses dan memanipulasi elemen dengan nama class tertentu.

Dalam contoh berikut ini memiliki tiga elemen <div> dengan atribut class dengan nilai "kota". Ketiga elemen <div> akan ditata dengan sama sesuai dengan definisi style .city di bagian head.


Contoh

<!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>Jakarta</h2>
  <p>Jakarta adalah ibu kota Indonesia.</p>
</div>
<div class="city">
  <h2>Riyadh</h2>
  <p>Riyadh adalah ibu kota Arab Saudi.</p>
</div>
<div class="city">
  <h2>Ankara</h2>
  <p>Ankara adalah ibu kota Turki.</p>
</div>

</body>
</html>

Dalam contoh berikut ini memiliki dua elemen <span> dengan atribut class dengan nilai "note". Kedua elemen <span> akan diberi style yang sama sesuai dengan definisi style .note di bagian head.


Contoh

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>Ini<span class="note">Peringatan</span> Penting</h1>
<p>Beberapa catatan<span class="note">penting</span> untuk dibaca.</p>

</body>
</html>

Tips: Atribut class dapat digunakan pada elemen HTML apa pun.

Catatan: Nama class peka huruf besar kecil!


Sintaks Untuk Class

Untuk membuat class, tulis karakter titik (.), diikuti dengan nama class. Kemudian, tentukan properti CSS di dalam tanda kurung kurawal {}.


Contoh

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

<h2 class="city">Jakarta</h2>
<p>Jakarta adalah ibu kota Indonesia.</p>
<h2 class="city">Riyadh</h2>
<p>Riyadh adalah ibu kota Arab Saudi.</p>
<h2 class="city">Ankara</h2>
<p>Ankara adalah ibu kota Turki.</p>

</body>
</html>

Class Ganda

Elemen HTML dapat dimiliki oleh lebih dari satu class.

Untuk mendefinisikan banyak class, pisahkan nama class dengan spasi, mis. <div class="city main">. Elemen akan diberi style sesuai dengan semua class yang ditentukan.

Dalam contoh berikut, elemen <h2> pertama milik class city dan juga class main, dan akan mendapatkan style CSS dari kedua class.


Contoh

<h2 class="city main">Jakarta</h2>
<h2 class="city">Riyadh</h2>
<h2 class="city">Ankara</h2>

Elemen Berbeda Dapat Berbagi Class yang Sama

Elemen HTML yang berbeda dapat mengarah ke nama class yang sama.

Pada contoh berikut, <h2> dan <p> menunjuk ke class "city" dan akan menggunakan style yang sama.


Contoh

<h2 class="city">Riyadh</h2>
<p class="city">Riyadh adalah ibu kota Arab Saudi.</p>

Penggunaan Atribut Class dalam JavaScript

Nama class juga dapat digunakan oleh JavaScript untuk melakukan tugas tertentu untuk elemen tertentu.

JavaScript bisa mengakses elemen dengan nama class tertentu dengan metode getElementsByClassName().


Contoh

Klik pada tombol untuk menyembunyikan semua elemen dengan nama class "city". 

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

Jangan khawatir jika Anda tidak memahami kode pada contoh di atas, Anda akan mempelajari lebih lanjut tentang JavaScript di situs ini.


Ringkasan

  • Atribut class HTML menentukan satu atau lebih nama class untuk sebuah elemen
  • Class digunakan oleh CSS dan JavaScript untuk memilih dan mengakses elemen tertentu
  • Atribut class dapat digunakan pada elemen HTML apa pun
  • Nama class peka huruf besar kecil
  • Elemen HTML yang berbeda dapat mengarah ke nama class yang sama
  • JavaScript bisa mengakses elemen dengan nama class tertentu dengan metode getElementsByClassName()

Sumber referensi: w3schools

Komentar

Posting Komentar