Photo by Jeffrey Leung on Unsplash

Sebelum kita membahas CSS selector, pada materi sebelumnya kita sudah mengetahui bahwa aturan penulisan sintaks CSS adalah sebagai berikut

(source : https://www.w3schools.com/css/css_syntax.asp)

Dari gambar diatas, Selector berfungsi untuk memilih atau menyeleksi elemen mana yang akan kita atur, sedangkan declaration adalah sintaks CSS yang kita sisipkan yang terdiri dari nama properti dan value dari properti tersebut. Jika kita ingin menyisipkan beberapa deklarasi CSS, maka pisahkan dengan titik koma(;).

Jika kita masih belum paham fungsi selector, coba pahami analogi dibawah ini.
Ketika kita menyuruh tukang bangunan untuk mengecet dinding rumah kita, maka kita harus menjelaskan dinding sebelah mana yang mau dicat, karena dinding rumah itu bisa di dapur, di kamar, di bagian tengah, dll. begitu pula dengan elemen HTML. sebelum membuat CSS, kita dianjurkan untuk menyusun elemen HTML nya terlebih dahulu. lalu setelah itu satu persatu kita atur elemen mana yang akan kita rubah tampilannya, geser posisinya, sisipkan backgorund, dll dengan menggunakan CSS selector

CSS Selector digunakan untuk memilih atau menyeleksi elemen html yang akan kita atur CSS nya berdasarkan pada :

• nama element (by Tag) contohnya h1, p, div, header, section, dll.
• id dari suatu elemen (by ID) contohnya <section id=”home”>, <section id=”profil”>, dll.
• class dari suatu elemen (by Class) contohnya <article class=”nobg”>, <article class=”no-padding”>, dll.
• attribute dari suatu elemen selain id dan class (by Attribute name) contohnya <input type=”text” ../>, <input name=”phone” />
• berdasarkan event tertentu misalnya pada saat tombol di hover (:hover) pada saat checbox di checked (:checked)
• dan masih banyak lagi yang lainnya selama css masih dikembangkan dan disesuaikan dengan perkembangan teknologi

Untuk memahami semua selector diatas, mari kita praktekkan satu persatu.

Tag/Elemen Selector

Selector ini menyeleksi suatu elemen berdasarkan nama tag yang kita pakai untuk menulis elemen tersebut. contohnya kita mengiginkan bahwa untuk setiap judul yang kita tulis ingin bergaris bawah, dan tulisannya huruf kapital. sedangkan untuk paragraf yang kita buat agak menjorok ke dalam.

Kadang-kadang, meskipun kita menggunakan elemen yang sama kita ingin memberikan pengaturan yang berbeda. Kita tidak mungkin untuk mengatur berdasarkan tag tersebut, dikarenakan tag tersebut digunakan ditempat yang lain dengan bentuk yeng berbeda. oleh karena itu, ada cara lain dalam menyeleksi suatu elemen yaitu dengan menggunakan ID atau Class pada elemen tersebut.

ID Selector

• ID selector menggunakan attribut id pada elemen HTML untuk menyeleksi elemen tersebut.
• ID pada tiap elemen harus unik, jadi ID Selector digunakan untuk menyeleksi elemen yang unik.
• Untuk menyeleksi id pada suatu elemen gunakan karakter hash(#) lalu diikuti dengan nama id yang kita tulis pada elemen tersebut.

Class Selector

• Class selector menggunakan attribut class pada elemen HTML untuk menyeleksi elemen tersebut.
• Untuk menyeleksi class pada suatu elemen gunakan karakter dot(.) lalu diikuti dengan nama class yang kita tulis pada elemen tersebut.

Untuk memahami selector dengan ID dan Class perhatikan contoh dibawah ini

Perbedaan antara ID dan Class

• ID seharusnya Unique
  • Dalam 1 elemen hanya boleh memiliki 1 ID
  • Dalam 1 document tidak boleh ada ID yang sama
  • Meskipun kita memakai id yang sama dan tetap ditoleransi oleh browser, namun jika kita menggunakan javascript, maka yang terbaca hanya satu elemen atau bahkan tidak sama sekali.
• Class tidak Unique
  • Dalam 1 elemen boleh memiliki multi class
  • Class yang sama bisa digunakan di semua elemen meskipun dalam document yang sama

Selain menggunakan ke 3 selector diatas, kita pun bisa melakukan pengaturan berdasarkan nama attribut atau berdasarkan event tertentu. contohnya saya ingin merubah semua inputan bertipe text dan textarea. atau saya ingin merubah background button menu ketika di hover. Perhatikan contoh dibawah ini :

Demikian Penjelasan mengenai CSS Selector dan contoh implementasinya. mudah-mudahan bermanfaat bagi kita semua. jika ada pertanyaan terkait materi ini, atau ada yang tidak paham dengan sintaks-sintaks baru yang saya tulis diatas, silakan kirim komentar pada kolom dibawah artikel ini.

Keep Learning
Semangat ^_^