CSS Selectors

CSS Selectors

CSS Selector digunakan untuk "menemukan" atau menyeleksi elemen HTML yang ingin Anda beri gaya.

5 Kategori Utama Selector:

Element Selector: Menyeleksi berdasarkan nama tag (misal: p, h1).
ID Selector: Menyeleksi satu elemen unik dengan tanda pagar (misal: #headerUtama).
Class Selector: Menyeleksi kelompok elemen dengan tanda titik (misal: .sorotan).
Universal Selector: Menyeleksi seluruh elemen dengan tanda bintang (*).
Grouping Selector: Mengelompokkan beberapa selector dengan koma (misal: h1, h2, p { ... }).

Contoh Penggunaan Selector Elemen, Class, dan ID:

<!DOCTYPE html>
<html>
<head>
    <style>
        #judulSpesial { color: #fca311; }
        .teks-hijau { color: #04AA6D; font-weight: bold; }
        h3, p { font-family: sans-serif; }
    </style>
</head>
<body>

    <h3 id="judulSpesial">Judul dengan ID Spesial (#)</h3>
    <p class="teks-hijau">Paragraf dengan Class (.teks-hijau)</p>
    <p>Paragraf biasa yang terpengaruh selector elemen p.</p>

</body>
</html>

Coba Sendiri (Try it Yourself) »

Selector class diawali tanda titik (.), sedangkan selector ID diawali tanda pagar (#).

Uji Pemahaman Singkat (Test Yourself):

Bagaimana cara menulis selector untuk elemen dengan class='menu'?

Selesaikan Topik Ini

Tandai modul selesai untuk mencatat progres akun Anda.

5 Kategori Utama Selector:

Selesaikan Topik Ini

CSS Tutorial