CSS id Selector
ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue}. Contoh tersebut menyeleksi element yang memiliki attribute ID dengan value "intro" agar tulisannya berwarna biru dan didalam html, kita sisipkan attribute: id="intro". Misalkan, kita ingin menyisipkannya pada sebuah elemen <p> maka, kita bisa menulis markup <p id="intro">...</p>.
Harap diperhatikan, dalam sebuah halaman atau dokumen tidak boleh terdapat lebih dari satu id dengan value yang sama. Artinya, nilai (value) dari sebuah id harus unik dan tidak boleh dideklarasikan lebih dari satu. Apabila sudah disisipkan pada elemen tertentu maka tidak boleh disisipkan pada elemen yang lain dalam satu halaman.
Dalam penamaan ID tidak boleh menggunakan angka pada awal nama ID, contoh salah: id="3intro" tetapi, yang benar adalah: id="intro3" atau id="intro3-teks" (angka diakhir kata atau ditengah-tengah adalah benar.)
ID Selector bersifat Case-Sensitive. id="intro" berbeda dengan id="inTro" karena perbedaan huruf t kecil dengan huruf T besar.
Syntax
Penggunaan Sintaksis CSS id
#ID {
Property: Value; /* Deklarasi CSS */
}
Example
Contoh CSS id
Di dalam HTML tag, kita menuliskan id, kemudian tanda sama dengan (=) dan diikuti nama id apa saja yang kita tentukkan yang diapit dengan tanda kutip (""). Contoh pada html tag: <article>
<article id="content">
Artikel Belajar CSS ID Selector
</article>
Kemudian didalam CSS, kita medeklarasikannya dengan tanda pagar (#) kemudian diikuti dengan nama id yang kita tentukkan pada HTML element tersebut.
#content {
font-family: Arial, sans-serif;
font-size: 14px;
color: red;
}
Kode diatas dapat dilihat hasilnya pada contoh lengkap demo editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tutorial CSS ID, Bahasa Indonesia</title>
<style>
#content {
font-family: Arial, sans-serif;
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<article id="content">
Artikel Belajar CSS ID Selector
</article>
</body>
</html>
ID selector, bisa juga digunakan sebagai jalan pintas menuju elemen atau bagian tertentu. Digunakan sebagai link yang apabila diklik, maka akan menuju ke ID yang sebelumnya telah ditentukan. Ini, dilakukan sepenuhnya oleh HTML tanpa kode CSS.
<!-- link/elemen yang digunakan sebagai jalan pintas -->
<a href="#artikel">Menuju Artikel ID Selector Bahasa Indonesia</a>
<!-- elemen yang ingin dituju -->
<article id="artikel">
<p>Ini adalah Artikel ID Selector Bahasa Indonesia yang memiliki ID "artikel". Apa itu ID Selector? ID Selector adalah CSS Selector yang digunakan untuk menyeleksi element yang memiliki attribut ID dengan nilai (value) tertentu. Satu halaman hanya berlaku satu ID unik.</p>
</article>
SHARE