Selektor CSS

1. Selektor Elemen

Selektor elemen digunakan untuk memilih elemen HTML berdasarkan tipe elemennya. Contohnya:

p {
    color: blue;
}

Dalam contoh di atas, semua elemen <p> akan memiliki warna teks biru.

2. Selektor ID

Selektor ID digunakan untuk memilih elemen dengan ID tertentu. ID harus unik di dalam dokumen. Contohnya:

#judul {
    font-size: 24px;
}

Dalam contoh di atas, elemen dengan ID "judul" akan memiliki ukuran font 24px.

3. Selektor Kelas

Selektor kelas digunakan untuk memilih elemen-elemen dengan kelas tertentu. Contohnya:

.button {
    background-color: #FF5733;
}

Dalam contoh di atas, semua elemen yang memiliki kelas "button" akan memiliki latar belakang berwarna #FF5733.

4. Selektor Keturunan

Selektor keturunan digunakan untuk memilih elemen yang berada di dalam elemen lain. Contohnya:

.container p {
    margin: 10px;
}

Dalam contoh di atas, semua elemen <p> yang berada di dalam elemen dengan kelas "container" akan memiliki margin 10px.

5. Selektor Elemen Anak

Selektor elemen anak digunakan untuk memilih elemen yang menjadi anak langsung dari elemen lain. Contohnya:

ul > li {
    list-style: square;
}

Dalam contoh di atas, elemen <li> yang menjadi anak langsung dari elemen <ul> akan memiliki gaya daftar dengan tanda kotak.

6. Selektor Universal

Selektor universal digunakan untuk memilih semua elemen dalam dokumen. Contohnya:

* {
    text-align: center;
}

Dalam contoh di atas, semua elemen dalam dokumen akan memiliki perataan teks ke tengah.

Ini adalah beberapa jenis selektor CSS yang umum digunakan. Anda dapat menggabungkan selektor-selektor ini untuk mengatur tampilan elemen-elemen HTML sesuai kebutuhan Anda. Jangan lupa untuk menambahkan CSS ke dalam elemen <style> di dalam dokumen HTML Anda atau menyisipkannya melalui file eksternal.