Kita perlu memahami tenteng Apa Itu Selector pada CSS. Tanpa kita mengetahuinya, kita tidak bisa melakukan stylinh pada elemen yang ingin kita ubah. Selector digunakan untuk menargetkan elemen HTML tertentu agar kita dapat melakukan perubahan gaya pada elemen tersebut. Pada artikel ini, kita akan membahas 3 jenis selector pada CSS yang paling sering digunakan dalam CSS yaitu, Tag Selector, Class Selector, dan ID Selector.

Tag Selector

Tag selector atau elemen selector digunakan untuk menargetkan elemen html berdasarkan nama tag yang digunakan. Contohnya sebagai berikut:

h1 {
  color: green;
  font-size: 32px;
}

Kita menuliskan tag h1 pada kode css tanpa menggunakan tanda <>. Dengan menggunakan selector h1 akan mengatur semua elemen yang menggunakan tag <h1> agar tampil berwarna hijau dan berikuran 32 piksel. Menggunakan tag selector sangat sederhana dan mudah digunakan. Tetapi, kurang fleksibel jika ingin menargetkan elemen tertentu.

Class Selector

Class Selector digunakan untuk menargetkan elemen HTML yang memiliki atribut class. Dalam penulisannya pada CSS, class diawali dengan tanda titik (.). Berikut contoh penggunaanya. Kode HTML

<p class="highlight-me">This is important paragraph</p>

Kode CSS

.highlight-me {
 background-color: blue;
 font-weight: bold;
}

Class selector .highlight-me akan tampil dengan latar belakang berwarna biru dan teks tebal hanya pada elemen yang memiliki class tersebut. Keunggunalan menggunakan class selector adalah sebagai berikut.

Bisa digunakan di lebih dari satu elemen secara spesifik.
Cocok untuk membuat gaya yang berulang pada banyak elemen.
Fleksibel dan sangat umum digunakan dalam proyek web modern.

ID Selector

ID Selector digunakan untuk menargetkan elemen yang memiliki atribut id. Dalam penulisannya pada CSS, ID diawali dengan tanda pagar (#). Berikut contoh penggunaanya. Kode HTML

<h1 id="title">Main Title</h1>

Kode CSS

#title {
 color: gray;
 text-align: center;
}

Selector #title hanya akan mempengaruhi elemen dengan atribute dan nilai id="title".

Tips Penggunaan Selector Yang Efektif

Agar penggunaan CSS Selector lebih efisien dan profesional, penting bagi kita untuk memahami kapan kita menggunakan tag, class, dan ID. Setiap selector mempunyai kelebihan dan tujuan penggunaanya sendiri, terutama dalam real project.

Gunakan class selector untuk styling yang digunakan berulang.
Tag selector boleh digunakan ketika projek yang kita bangun tidak terlalu kompleks.
Gunakan tag selector untuk mengatur gaya dasar dari elemen HTML secara menyeluruh seperti pada tag <body> untuk mengatur latar belakang atau font secara global.
Untuk elemen yang benar-benar unik contohnya seperti tombol submit, kita dapat menggunakan ID selector.
Hindari penggunaan ID untuk styling umum. Karena id memiliki specifity yang lebih tinggi daripada class.

Kesimpulan

Selector CSS adalah dasar dari semua penulisan dalam CSS. Dengan selector, kita bisa memilih elemen HTML dan mengatur tampilannya sesaui kebutuhan.

Terimakasih, sampai jumpa di artikel selanjutnya.