Mengenal Dasar Selector Id dan Class Pada CSS

Selector pada CSS berfungsi untuk memilih elemen html yang di-style sesuai dengan deklarasi pada selector tersebut. Pada tulisan sebelumnya kita telah mengenal selector CSS menggunakan elemen-elemen html seperti paragraf (p) dan heading (h1). Selector CSS dengan nama elemen ini juga berlaku untuk elemen yang lain seperti link (a), list (ul dan ol), table dan yang lainnya.

Kemudian muncul pertanyaan bagaimana jika kita akan menerapkan style yang berbeda untuk elemen yang sama? Misalnya paragraf pertama dibuat margin 10px lalu paragraf kedua dibuat margin 20px. Jawabannya, kita bisa menggunakan selector Id dan Class.

Menggunakan Selector Id pada CSS

Selector Id digunakan untuk memilih satu elemen unik pada html. Cara menggunakan selector Id adalah dengan menambahkan attribut id pada elemen html tertentu. Id ini harus unik dalam satu page, jika kita bisa menerapkan CSS kepada satu elemen yang dimaksud (unique element).

Cara penulisan selector Id

Tips dari admin johan andy agasi blog. Untuk menuliskan selector Id kita menggunakan karakter hash (#). Kemudian nama Id ditulis tepat setelah tanda # tanpa spasi. Deklarasi CSS untuk ID ini ditulis diantara kurung kurawal seperti pada selector elemen.

Kemudian pada elemen html tertentu kita taruh atribut "id" dengan nama yang sama dengan id pada CSS tadi. Atribut id ini juga digunakan untuk pemrograman Javascript, jadi bisa saling pakai Id.

Contoh penggunaan selector Id

view plain print ?

<html>
<head>
<title>Contoh Selector Id CSS</title>
</head>
<style>
h1 {
font-size: 20px;
}
#top {
color: red;
}
#bottom {
color: blue;
}
</style>
<body>
<h1>Contoh Penggunaan Selector Id</h1>
<p id="top">Paragraf paling atas warna merah</p>
<p>Paragraf ditengah tidak di-style</p>
<p id="bottom">Paragraf paling bawah warna biru</p>
</body>
</html>

Pada contoh diatas, kita mempunyai dua buah id, yaitu "top" dan "bottom". Pada CSS, paragraf dengan id "top" kita buat warna merah dan paragraf dengan id "bottom" kita buat warna biru.

Kemudian pada tag <p> untuk paragraf paling atas kita tambahkan attribut id="top" dan pada paragraf paling bawah kita tambahkan atribut id="bottom".

Dan berikut ini hasil tampilan dari contoh penggunaan selector Id diatas :

Menggunakan Selector Class pada CSS

Selector Class digunakan untuk memilih elemen html yang memiliki sifat atau perilaku yang sama dalam satu halaman. Selector Class ini bisa digunakan untuk beberapa elemen dalam satu halaman. Penerapan selector Class sebaiknya memperhatikan kesamaan elemen-elemen pada halaman html.

Sebagai contoh kita akan menerapkan style pada paragraf yang berada diantara paragraf pertama dan paragraf terakhir pada contoh diatas. Kemudian kita buat class "midle" untuk mendefinisikannya. Jadi setiap paragraf dengan class "midle" akan dikenakan style yang kita buat.

Cara penulisan selector class

Penulisan selector class pada CSS diawali dengan huruf titik (.) atau dot. Kemudian nama class ditulis tepat setelah tanda titik. Deklarasi CSS untuk Class ini ditulis diantara kurung kurawal seperti pada selector elemen dan selector id.

Kemudian pada elemen html tertentu kita taruh atribut "class" dengan nama yang sama dengan nama class pada CSS tadi.

Contoh penggunaan selector class

view plain print ?

<html>
<head>
<title>Contoh Selector Class CSS</title>
</head>
<style>
h1 {
font-size: 20px;
}
#top {
color: red;
}
#bottom {
color: blue;
}
.midle {
color: green;
}
</style>
<body>
<h1>Contoh Penggunaan Selector Id</h1>
<p id="top">Paragraf paling atas warna merah</p>
<p class="midle">Paragraf ditengah warna hijau</p>
<p class="midle">Paragraf ditengah warna hijau</p>
<p id="bottom">Paragraf paling bawah warna biru</p>
</body>
</html>

Pada contoh diatas kita menambahkan sebuah selector class dengan nama "midle" dan diset dengan warna hijau. Kemudian untuk semua paragraf yang ditengah kita taruh atribut class="midle".

Dan berikut ini hasil tampilan dari contoh penggunaan selector class diatas :

contoh penggunaan selector class pada css

Perbedaan selector id dan selector class

Untuk memahami perbedaan penggunaan selector id dan selector class pada css perlu digaris bawahi bahwa id itu unik dan hanya ada satu dalam satu halaman html. Sedangkan class bisa lebih dari satu yang penting mempunyai kesamaan anta elemen dalam satu class.

Jika kita sengaja atau tidak sengaja menggunakan id untuk beberapa elemen memang css akan tetap bisa bekerja, namun tetap dianjurkan untuk menggunakan class khususnya jika dalam halaman tersebut juga ada javascript-nya.