Selector


Dalam artikel ini saya akan membahas secara detail tentang berbagi jenis pemilihan elemen, dan cara kerjanya.

Pada artikel sebelumnya telah membahas tentang Syntax CSS secara umum. Selector merupakan salah satu dari aturan kode CSS yang ditempatkan sebelum blok deklarasi (declaration block).

 

Jenis – Jenis selector :

  1. Simple selector :

Mencocokkan satu atau lebih element berdasarkan tipe elemen (h1, h2, p, a, article, dll), class, atau id.

  1. Attribute selector :

Mencocokkan satu atau lebih element berdasarkan atribut / nilai atributnya.

  1. Pseudo-class :

Mencocokkan satu atau lebih element berdasarkan kondisi / keadaan tertentu, seperti (:hover), (:focus), (:checked), (:disabled), dll.

  1. Pseudo-element :

Mencocokkan satu atau beberapa bagian konten yang berada pada posisi tertentu (dalam kaitannya dengan elemen). Misalnya kata pertama dari setiap paragraf, atau sebuah konten yang dibuat sebelum element.

  1. Kombinator :

Menggabungkan dua atau lebih selector yang bertujuan untuk membuat selector yang lebih spesifik. Misalnya kalian memilih elemen paragraf (<p>) yang merupakan turunan dari element div, atau sebuah paragraf yang merupakan turunan dari class tertentu.

  1. Multiple selector :

Dalam kode CSS kalian mungkin akan menjumpai sebuah element yang dipilih, meskipun berbeda (seperti class .judul dengan elemen h1) tapi kalian mendeklarasikan properti dan nilainya sama. Kalian bisa menyingkatnya dengan hanya memilih kedua selector tersebut yang dipisahkan dengan tanda koma lalu mendeklarasikannya.