CSS Selector digunakan untuk memilih elemen HTML mana yang ingin diberi style pada tampilan visualnya. 

Syntaxnya seperti ini:

Keterangan:

  • selector ditandai dengan elemen HTML yang ingin diberi style, seperti tag h1, h2, p, a, div, body, dan tag lainnya.
  • property ditandai dengan bagian dari elemen HTML yang ingin diatur stylenya, seperti ukuran teks, jenis font, warna teks, warna background, dan sebagainya.
  • value ditandai dengan nilai property yang akan diberikan ke elemen HTML.

Selector CSS dapat dibagi menjadi 6 kategori:
  • Global selectors
  • Element selectors
  • Id selectors
  • Class selectors
  • Attribute selectors
  • Pseudo selectors
Beikut ini pembahasan dan contohnya:

1. Global Selectors

Global selectors yaitu memberi style pada semua elemen di website dengan menggunakan * sebagai selector.

Contoh:

Hasilnya semua elemen (termasuk <html> dan <body>) memiliki latar belakang berwarna pink.

Catatan: elemen-elemen di tag <body> harus dibungkus dalam satu container. Pada contoh di atas, elemen-elemen di bagian body dibungkus menggunakan elemen <div> sebagai containernya.

Kita juga bisa memberi style pada semua elemen yang ada di dalam elemen tertentu. 

Contoh:

Hasilnya setiap elemen yang ada di dalam elemen <div> memiliki latar belakang kuning.

2. Element Selectors

Element selectors yaitu memberi style pada semua elemen tertentu dengan menggunakan nama tag element tersebut sebagai selector. Ada beberapa cara penulisan sintaks:
  • element
  • element1, element2
  • element1 element2
  • element1 > element2
  • element1 + element2
  • element1 ~ element2

Contoh 1: memberi style latar belakang pink pada semua elemen <div>

Hasilnya semua elemen <div> akan memiliki latar belakang pink (termasuk elemen yang ada di dalamnya).

Contoh 2: memberi style latar belakang hijau pada semua element <h2> dan <p>.



Contoh 3: memberi style latar belakang pink pada semua elemen <p> yang ada di dalam elemen <div>


Contoh 4: memberi style latar belakang kuning pada semua child element <p> yang parentnya elemen <div>

Contoh 5: memberi style latar belakang pink pada semua elemen <p> yang posisinya tepat setelah elemen <div> 

Contoh 6: memberi style latar belakang hijau pada semua elemen <ul> yang didahului dengan elemen <p> 


3. ID Selectors

Sebuah HTML element bisa kita beri id atau tanda pengenal yang bersifat unik (satu elemen hanya memiliki satu id dan satu id hanya boleh digunakan oleh satu elemen saja). Dengan id tersebut, kita bisa memberi style pada elemen dengan menggunakan tanda # diikuti dengan id dari elemen.

Contoh 1: memberi style latar belakang kuning pada elemen dengan id firstParagraph, dan style latar belakang hijau pada elemen dengan id secondParagraph.



Contoh 2: memberi style latar belakang pink pada child element <p> yang parentnya elemen <div> dengan id container.



4. Class Selectors

Selain menggunakan id, kita juga bisa memberikan tanda pengenal berupa class. Class selectors memberi style di elemen berdasarkan nama class yang diberikan. Class selectors dibuat dengan tanda titik yang diikuti nama class dari elemen tersebut.

Berbeda dengan id yang bersifat unik, class bisa digunakan dalam lebih dari satu elemen dan sebuah elemen bisa memiliki lebih dari satu class.

Contoh:

 Hasilnya elemen <div> dengan class hightlight dan class biodata memiliki latar belakang hijau dan teks berwarna putih, sedangkan elemen <p> dengan class highlight memiliki latar belakang hijau namun teks tidak berwarna putih karena tidak memiliki class biodata.

5. Attribute Selectors

Attribute selectors yaitu memberikan style pada elemen dengan attribute tertentu yang diapit dengan tanda kurung siku. Ada beberapa cara penulisan sintaks:

  • [attribute]
  • [attribute=value]
  • [attribute^=value]
  • [attribute$=value]
  • [attribute*=value]
  • [attribute~=value]
  • [attribute|=value]

Penulisan sintaks bisa berdasarkan elemen dan atribut atau berdasarkan atributnya saja.

Contoh 1: memberi style latar belakang kuning pada semua elemen dengan property target.

jika ingin memberi style latar belakang kuning pada semua elemen <a> dengan property target.

Contoh 2: memberi style latar belakang kuning pada semua elemen <a> dengan property target yang memiliki value _blank

Contoh 3: memberi style latar belakang pink pada semua elemen dengan property class yang valuenya dimulai dengan awalan kata 'top'.

Jika ingin memberi style latar belakang pink hanya pada semua elemen <p> dengan property class yang valuenya dimulai dengan awalan kata 'top'.

Contoh 4: memberi style latar belakang pink pada semua elemen dengan property class yang valuenya diakhiri dengan kata 'test'.

Contoh 5: memberi style latar belakang yellow pada semua elemen dengan property class yang valuenya mengandung unsur 'te'.

Contoh 6: memberi style border biru pada semua elemen dengan property class yang valuenya mengandung kata 'flower'.

Contoh 7: memberi style latar belakang hijau pada semua elemen dengan property class yang valuenya diawali dengan kata 'top' (satu kata utuh).


6. Pseudo Selectors

Pseudo selectors adalah CSS selectors yang digunakan untuk mengakses kode HTML yang ‘tidak terlihat’ atau merupakan bagian dari sebuah tag yang tidak bisa diakses dengan selector biasa.

Ada 2 macam pseudo selectors:

  1. Pseudo-class selectors
  2. Pseudo-element selectors

Pseudo-class Selectors

Pseudo-class digunakan untuk mendefinisikan keadaan khusus suatu elemen. Misalnya, digunakan untuk:
  • Memberikan style pada elemen saat di-hover
  • Memberikan style berbeda pada elemen link sebelum dan setelah di-klik (dikunjungi)
  • Memberikan style pada elemen saat mendapatkan fokus
Syntax penulisannya menggunakan titik dua setelah elemen:

Contoh 1: memberikan style warna teks hijau menggunakan pseudo-class :hover pada elemen <a> saat di-hover atau disentuh pointer.

Contoh 2: 

  • Memberikan style latar belakang merah pada elemen <p> yang merupakan child ke-2 dari parentnya (elemen <body>)
  • Memberikan style latar belakang kuning pada elemen <p> yang merupakan child ke-3 dari parentnya (elemen <body>) dan memberikan style latar belakang kuning pada elemen <li> yang merupakan child ke-3 dari parentnya (elemen <ul>)
  • Memberikan style latar belakang hijau pada elemen <li> yang merupakan child element ke-2 dari parentnya (elemen <ul>)


Berikut ini pseudo-class yang sering digunakan:

  • :link digunakan untuk memberikan style berbeda pada link sebelum dan setelah di-klik (dikunjungi)
  • :visited digunakan untuk memberikan style pada link yang sudah diklik atau dikunjungi.
  • :active digunakan untuk memberikan style pada elemen yang sedang aktif, seperti pada link saat diklik.
  • :focus digunakan untuk memberikan style pada elemen yang sedang dalam keadaan fokus, seperti pada form saat teks sedang diinput.
  • :checked digunakan untuk memberikan style pada elemen yang dicentang pada checkbox.

Pseudo-element Selectors

Pseudo-element digunakan untuk memberikan style pada bagian tertentu dari suatu element. Misalnya, digunakan untuk:

  • Memberikan style pada baris pertama dari dari suatu paragraf
  • Memberikan style pada huruf pertama pada suatu kalimat
  • Menyisipkan konten sebelum atau sesudah suatu element

Syntax penulisannya menggunakan titik dua sebanyak 2x setelah elemen:

Contoh: memberikan style latar belakang kuning pada satu baris pertama dari elemen <p> dengan menggunakan pseudo-class selectors ::first-line.

Properti CSS yang bisa dan sering digunakan dengan ::first-line adalah:

  • font
  • background
  • word-spacing
  • letter-spacing
  • text-transform
  • line-height
  • color

Berikut ini pseudo-element yang sering digunakan:

  • ::before digunakan untuk menyisipkan suatu konten sebelum element dari selector
  • ::after digunakan untuk menyisipkan suatu konten setelah element dari selector
  • ::selection digunakan untuk memberikan style pada bagian element yang diselect oleh pengguna
  • ::first-letter digunakan untuk memberikan style pada huruf pertama pada element dari selector

Selesai.

Sumber gambar: https://bit.ly/3CLiL38