Atribut class HTML

Definisi dan penggunaan

class Atribut yang menentukan nama kelas (classname) elemen.

class Atribut utamanya digunakan untuk mengarahkan ke kelas (class) dalam gaya tabel. Namun, juga dapat digunakan melalui JavaScript (HTML DOM) untuk mengubah elemen HTML yang memiliki kelas yang ditentukan.

Lihat pula:

Panduan Tutorial HTML:Atribut HTML

Panduan Tutorial CSS:Sintaks CSS

Panduan Referensi CSS:Pemilih .class CSS

Panduan Referensi HTML DOM:Metode getElementsByClassName() HTML DOM

Panduan Referensi HTML DOM:Atribut className HTML DOM

Panduan Referensi HTML DOM:Atribut classList HTML DOM

Panduan Referensi HTML DOM:Objek Style DOM HTML

Contoh

Contoh 1

Menggunakan atribut class di dokumen HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>Sebuah paragraf.</p>
<p class="important">Perhatikan, ini adalah paragraf penting.:)</p>
</body>
</html>

Coba Sendiri

Ada banyak contoh lain di bawah halaman.

Sintaks

<element class="classname">

Nilai atribut

Nilai Deskripsi
classname

Tentukan satu atau beberapa nama kelas untuk elemen.

Jika ingin menentukan beberapa kelas, gunakan spasi untuk memisahkan nama kelas.

Ini memungkinkan Anda menggabungkan beberapa kelas CSS untuk elemen HTML.

Contoh:<span class="left important">

Aturan penamaan:

  • Harus dimulai dengan huruf A-Z atau a-z
  • Dapat diikuti dengan: huruf (A-Za-z), angka (0-9), tanda hubung ("-"), dan garis bawah ("_")

Beberapa contoh lain

Contoh 2

Menambahkan beberapa kelas ke elemen HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Judul 1</h1>
<p>Sebuah paragraf.</p>
</body>
</html>

Coba Sendiri

Contoh 3

Menambahkan warna latar belakang kuning ke elemen pertama dengan class="example" (indeks 0) menggunakan JavaScript.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Coba Sendiri

Contoh 4

Gunakan JavaScript untuk menambahkan kelas "mystyle" ke elemen dengan id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Coba Sendiri

Dukungan Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan