Selektor ID

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 13 dari 76.

Selector ID digunakan untuk menargetkan elemen HTML tertentu berdasarkan nilai atribut id-nya. Tidak seperti selector class, yang dapat digunakan untuk memberi gaya pada beberapa elemen, selector ID bersifat unik dan hanya dapat diterapkan pada satu elemen di halaman. Karena itu, selector ini berguna untuk memberi gaya khusus pada elemen individual tanpa menerapkan gaya tersebut pada elemen lain.

Untuk menargetkan elemen dengan ID tertentu di CSS, gunakan simbol pagar (#) diikuti nilai ID. Berikut sintaks dasar untuk menggunakan selector ID:

#idname {
    property: value;
}

Contohnya:

#intro {
    color: blue;
    font-size: 20px;
}

Dalam contoh ini, selector ID #intro menargetkan elemen dengan ID "intro". Deklarasi menetapkan warna teks menjadi biru dan ukuran font menjadi 20 piksel untuk elemen ini.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan berbagai elemen, termasuk heading (<h1>), paragraf (<p>), dan elemen div (<div>). Tugasmu adalah menggunakan selector ID untuk memberi style pada elemen div. Ikuti langkah-langkah berikut:

Tambahkan atribut id dengan nilai "special" ke elemen <div>.
Tulis aturan CSS menggunakan selector ID yang menargetkan elemen dengan ID "special". Atur warna latar belakang elemen ini menjadi yellow dan warna teksnya menjadi red.

Coba sendiri

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>