Mengenal Atribut Class dan ID

Proses pembuatan website biasanya dimulai dengan merancang prototipe desain web menggunakan software grafis seperti Adobe Photoshop, Sketch, atau Figma.

Setelah rancangan desain web selesai dibuat, selanjutnya baru menerapkan prototipe desain tersebut pada dokumen HTML.

Agar dokumen HTML bisa memiliki tampilan yang sama persis dengan prototipe desain, maka harus diberi style CSS pada masing-masing elemen HTML penyusunnya.

Sayangnya, sangat sulit menyeleksi elemen mana yang akan diberi style yang sama atau diberi style yang berbeda.

Misalnya ada 3 elemen <div> yang masing-masing ingin diberi warna background merah, hijau, dan biru.

Bagaimana cara menyeleksinya?

Isi Konten

Untuk mengatasi masalah ini, maka selector class bisa digunakan sebagai solusinya.

Kamu bisa menambahkan atribut class dengan nama yang berbeda pada ketiga elemen <div> tersebut.

<div class="box__container">
  <div class="box box--red">merah</div>
  <div class="box box--green">hijau</div>
  <div class="box box--blue">biru</div>
</div>

.box__container {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  text-align: center;
}

.box {
  grid-column: span 1/span 1;
  padding: 1rem 0.75rem;
}

.box--red {
  background-color: #ffcdd2;
}

.box--green {
  background-color: #c8e6c9;
}

.box--blue {
  background-color: #bbdefb;
}

Penggunaan Atribut Class

Atribut class bisa ditambahkan pada hampir semua tag HTML yang berfungsi sebagai selector class.

Atribut class ini digunakan untuk menentukan style yang sama pada semua elemen dengan nama class yang sama.

Untuk membuat selector class, caranya dengan menambahkan atribut class pada elemen HTML. Kemudian diberi nama class yang unik dan mewakili tujuan class tersebut.

Misalnya saya ingin membuat elemen kotak dengan tag <div>, agar lebih mudah diingat maka saya akan memberi nama class box menjadi seperti ini <div class="box">.

Kemudian elemen dengan class “box” tersebut bisa dipanggil sebagai selector class dengan cara menuliskan karakter titik (.), kemudian diikuti oleh nama class-nya.

Seperti ini cara memanggil selector class di stylesheet:

.box {
  background-color: #ffe0b2;
  color: #4a5568;
  padding: 1.5em;
}

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
.brand {
  background-color: #ffe0b2;
  color: #4a5568;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="brand">
  <h2>Huawai</h2>
  <p>Huawai adalah brand smartphone asal China.</p>
</div>

<div class="brand">
  <h2>Samsung</h2>
  <p>Samsung adalah brand smartphone asal Korea Selatan.</p>
</div>

<div class="brand">
  <h2>iPhone</h2>
  <p>iPhone adalah brand smartphone asal Amerika Serikat.</p>
</div>

</body>
</html>

Menggunakan Atribut Class pada Elemen Inline

Atribut class juga bisa ditambahkan pada elemen inline.

Contoh:

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

<h1>Teks Judul Berwarna <span class="note">Merah</span> pada Tag span</h1>
<p>Ini teks paragraf berwarna <span class="note">merah</span> pada tag span.</p>

</body>
</html>

Tip: atribut class bisa digunakan pada berbagai elemen HTML
Catatan: nama class sangat sensitif.
Silahkan pelajari CSS secara detail di tutorial CSS

Memilih Elemen dengan class Khusus

Dalam CSS, untuk menyeleksi elemen dengan class khusus, tuliskan karakter titik (.), kemudian diikuti oleh nama class.

Contoh:

<style>
.brand {
  background-color: #ffe0b2;
  color: white;
  padding: 20px;
}
</style>

<h2 class="brand">Huawai</h2>
<p>Huawai adalah brand smartphone asal China.</p>

<h2 class="brand">Samsung</h2>
<p>Samsung adalah brand smartphone asal Korea Selatan.</p>

<h2 class="brand">iPhone</h2>
<p>iPhone adalah brand smartphone asal Amerika Serikat.</p>

Menggunakan Multiple Class

Elemen HTML juga bisa ditambahkan dengan lebih dari satu nama class. Dan setiap class harus dipisahkan dengan spasi.

Contoh:

<style>
.brand {
  background-color: #ffe0b2;
  color: white;
  padding: 20px;
}

.text-center {
  text-align: center;
}
</style>

<h2 class="brand text-center">Huawai</h2>
<p>Huawai adalah brand smartphone asal China.</p>

<h2 class="brand">Samsung</h2>
<p>Samsung adalah brand smartphone asal Korea Selatan.</p>

<h2 class="brand">iPhone</h2>
<p>iPhone adalah brand smartphone asal Amerika Serikat.</p>

Menggunakan Atribut Class di JavaScript

Nama class juga bisa digunakan oleh JavaScript untuk mengakses elemen HTML.

Caranya dengan menuliskan kode syntax getElementByClassName().

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

Penggunaan Atribut Id di HTML

Atribut id memiliki fungsi yang sama dengan atribut class.

Cara menentukannya juga sama, yaitu dengan menambahkan atribut id pada elemen dengan nama yang unik dan mewakili tujuan id tersebut.

Nilai id bisa digunakan oleh CSS dan JavaScript sebagai id selector.

Dalam CSS, untuk menyeleksi elemen dengan id khusus, tuliskan karakter tagar (#) diikuti oleh nama id elemen.

Seperti ini:

<style>
#judul {
  background-color: lightblue;
  color: black;
  padding: 32px;
  text-align: center;
}
</style>

<h1 id="judul">Judul Artikel Saya</h1>

Membuat Bookmark dengan ID dan link

Pada halaman artikel blog yang panjang, biasanya terdapat tabel konten yang berisi daftar isi dari keseluruhan konten blog tersebut.

Contohnya seperti yang bisa kamu lihat dibagian atas halaman ini.

Judul pada daftar isi ini, jika kamu klik maka akan meloncat ke bagian sub judul yang ada pada halaman website.

Di HTML, hal ini biasa disebut sebagai bookmark.

Contoh:

Buatlah bookmark dengan atribut id:

<h2 id="B3">Bagian 3</h2>

Kemudian tambahkan link ke bookmark (“melompat ke bagian 3”), dari halaman yang sama:

<a href="#B3">Lompat ke Bagian 3</a>

Menggunakan Atribut ID di JavaScript

JavaScript bisa mengakses elemen dengan id khusus menggunakan syntax getElementById()

<script>
function displayResult() {
  document.getElementById("judul").innerHTML = "Have a nice day!";
}
</script>

Perbedaan antara Class dan ID

Meskipun class dan ID memiliki fungsi yang sama, tetapi ada sedikit perbedaan diantara keduanya.

Elemen HTML hanya boleh memiliki satu id yang unik dalam sebuah halaman web.

Sedangkan nama class bisa digunakan oleh banyak elemen sekaligus dalam sebuah halaman web.

<style>
#judul {
  background-color: #c8e6c9;
  color: white;
  padding: 20px;
}
.brand {
  background-color: #ffe0b2;
  color: white;
  padding: 20px;
}
</style>
<h1 id="judul">Daftar Brand Smartphone Terpopuler</h1>

<h2 class="brand">Huawai</h2>
<p>Huawai adalah brand smartphone asal China.</p>

<h2 class="brand">Samsung</h2>
<p>Samsung adalah brand smartphone asal Korea Selatan.</p>

<h2 class="brand">iPhone</h2>
<p>iPhone adalah brand smartphone asal Amerika Serikat.</p>