Mengenal Jenis-jenis Selector di CSS untuk Memodifikasi Tampilan Web

CSS (Cascading Style Sheets) adalah salah satu teknologi yang digunakan untuk mengatur tampilan atau style pada halaman web. Dalam CSS, selector berperan penting sebagai bagian yang digunakan untuk memilih elemen HTML yang ingin diberikan gaya atau style. Dengan pemahaman yang baik tentang jenis-jenis selector di CSS, Anda dapat mengontrol tampilan halaman web dengan lebih efisien. Berikut adalah beberapa jenis selector yang umum digunakan:

1. Selector Elemen

Selector ini memilih elemen HTML berdasarkan nama tag-nya. Misalnya, untuk memilih semua elemen <p> (paragraf) pada halaman web, kita dapat menggunakan kode CSS berikut:

p {

    color: blue;

    font-size: 16px;

}

Kode di atas akan mengganti warna teks menjadi biru dan ukuran teks menjadi 16 piksel pada semua elemen <p>.

2. Selector Kelas

Selector ini memilih elemen berdasarkan nama kelas yang diberikan. Dalam HTML, kita dapat menambahkan atribut class pada elemen untuk memberikan kelas tertentu. Misalnya:

<div class="kotak">Kotak 1</div>

<div class="kotak">Kotak 2</div>

Kemudian, kita dapat menggunakan selector kelas pada CSS untuk menggaya kedua elemen tersebut:

.kotak {

    width: 100px;

    height: 100px;

    background-color: red;

    color: white;

}

Kode di atas akan memberikan gaya pada elemen-elemen dengan kelas "kotak", seperti membuatnya berukuran 100 piksel, berwarna merah, dan berwarna teks putih.

3. Selector ID

Selector ini memilih elemen berdasarkan atribut "id" yang diberikan. Dalam HTML, kita dapat menambahkan atribut id pada elemen untuk memberikan identifikasi unik. Misalnya:

<h1 id="judul">Judul Artikel</h1>

Kemudian, kita dapat menggunakan selector ID pada CSS untuk menggaya elemen tersebut:

#judul {

    font-size: 24px;

    font-weight: bold;

    color: green;

}

Kode di atas akan memberikan gaya pada elemen dengan ID "judul", seperti membuatnya berukuran teks 24 piksel, teks tebal, dan berwarna hijau.

4. Selector Child

Selector ini memilih elemen yang menjadi anak langsung dari suatu elemen tertentu. Misalnya:

<div class="container">

    <p>Paragraf 1</p>

    <p>Paragraf 2</p>

</div>

Kemudian, kita dapat menggunakan selector anak pada CSS untuk menggaya elemen-elemen <p> yang menjadi anak langsung dari elemen dengan kelas "container":

.container > p {

    margin-bottom: 10px;

    font-style: italic;

}

Kode di atas akan memberikan gaya pada elemen-elemen <p> yang menjadi anak langsung dari elemen dengan kelas "container", seperti memberikan margin bawah 10 piksel dan membuat teks menjadi miring.

5. Selector Pseudo

Selector ini memilih elemen berdasarkan keadaan atau status tertentu. Ada beberapa jenis selector pseudo yang umum digunakan, di antaranya:

:hover: Memilih elemen saat diarahkan oleh kursor.

:active: Memilih elemen saat sedang diklik.

:visited: Memilih elemen yang telah dikunjungi (hanya berlaku untuk link).

:nth-child(n): Memilih elemen anak ke-n dari suatu elemen induk.

:first-child: Memilih elemen pertama dari suatu elemen induk.

Contoh penggunaan selector pseudo:

.button:hover {

    background-color: yellow;

    color: black;

}

.list-item:nth-child(odd) {

    background-color: #eee;

}  

Kode di atas akan memberikan gaya pada tombol (elemen dengan kelas "button") saat diarahkan oleh kursor, dan memberikan latar belakang berwarna abu-abu (#eee) pada elemen anak ganjil dari suatu elemen induk (elemen dengan kelas "list-item").

6. Selector Universal

Selector ini memilih semua elemen pada halaman web. Digunakan dengan hati-hati karena dapat mempengaruhi kinerja dan konsistensi tampilan halaman web. Contoh penggunaan selector universal:

* {

    margin: 0;

    padding: 0;  

}  

Kode di atas akan menghilangkan margin dan padding pada semua elemen pada halaman web.

Dalam CSS, penggunaan selector yang tepat dapat membuat kode CSS menjadi lebih efisien dan memudahkan dalam mengatur tampilan halaman web. Selain itu, dengan menguasai jenis-jenis selector di CSS, Anda dapat memberikan gaya yang konsisten dan profesional pada halaman web Anda.