Pada postingan sebelumnya yang berjudul Cara Menuliskan Kode CSS (CSS Syntax) kita trelah membahas penggunaan tag HTML sebagai selector yang hendak kita format /atur  agar tampilan halaman blog / web sesuai dengan yang kita inginkan.
Pada saat kita hendak  mengatur tag heading <H1>, tetapi kita menginginkan untuk mengatur / memformat tag <h1>  dengan beberapa warna / property berbeda, misalnya kita ingin menggunakan tiga warna yang berbeda untuk heading <H1>, maka kita dapat menggunakan Class selector dan ID selector.

Pada prinsipnya kedua fungsi selector tersebut (Class selector dan ID selector) hampir sama, yang membedakannya hanya pada tingkat efektifitas berdasarkan frekuensi dari penggunaan kedua selector tersebut.

Class Selector
Class Selector digunakan Jika kita ingin mengatur tag HTML dengan beberapa properti yang berbeda dan akan digunakan secara berulang - ulang (lebih dari sekali),adapun penamaan class selector terserah pada pembuatnya.
  1. Penulisan Class Selector
    Seperti halnya kode CSS lainnya, Class Selector ditulis diantara kode <head> dan </head> yang diawali dengan <style> dan diakhiri dengan </style> dimana Cara penulisan Class Selector diawali dengan tanda titik (.) dengan format:
    • penulisan Class Selector tanpa tag HTML
      .nama-class {property:value;}
      Contoh: misal penulisan Class Selector untuk mengatur format rata tengah:
      .tengah {text-align:center;}
    • Penulisan class Selector dalam tag HTML  
      taghtml.nama-class {Property:value;}
      Contoh: misal penulisan class dalam tag HTML untuk mengatur warna Heading <H1>:
      H1.merah {color: red}
      H1.hijau {color: green}
      H1.biru {color: blue}
  2. Penggunaan class selector
    Cara menggunakan class selecor untuk menampilkan target dalam halama web/blog. adapun penempatannya adalah pada  kode HTML di antara <body> dan </body>. Termasuk dapat digunakan dalam post editor dengan mode HTML dan widget dengan konfigurasi HTML
    • Untuk menampilkan dalam halaman web, jika penggunaannya dalam tag HTML, maka penulisannya : dengan menambahkan kode class="nama-class"
      Contoh, misalnya untuk menampilkan class selector <h1> maka codenya:
      <h1 class="merah">HEADING INI BERWARNA MERAH</h1>
      <h1 class="biru">WARNA HEADING INI BIRU</h1>
      <h1 class="hijau">KALAU YANG INI HIJAU</h1>
    • Untuk penggunaan class selector di luar kode HTML,  maka menggunakan tag <div class="nama-class"> dan di akhiri dengan tag </div>. Contoh, misalnya untuk menampilkan class selector untuk mengatur rata tengah diatas maka codenya:
      <div class="tengah">
      ........
      </div>

Contoh Penulisan Class Selector
<style>
H1.red {color: red}
H1.green {color: green}
H1.blue {color: blue}
.tengah{text-align:center;}
.rata-kanan{text-align:right;}
</style>

Contoh Penulisan code dalam menampilkan target ke halaman web/blog:
<h1 class="red">
HEADING INI BERWARNA MERAH</h1>
<h1 class="blue">
WARNA HEADING INI BIRU</h1>
<h1 class="green">
KALAU YANG INI HIJAU</h1>
Hasilnya akan nampak seperti ini:

HEADING INI BERWARNA MERAH

WARNA HEADING INI BIRU

KALAU YANG INI HIJAU


Contoh  untuk menampilkan yang lain, misal kita pakai kode:
<div class="tengah"> ini tex biasa yang rata tengah
<h1>YANG INI H1 SAJA </h1>
<h1 class="green">KALAU YANG INI HIJAU (H1)</h1>
</div>
<div class="rata-kanan">
ini tex biasa yang rata kanan
<h1 class="red">YANG INI H1 MERAH rata kanan</h1>
<h1 class="green">KALAU YANG INI HIJAU (H1) rata kanan</h1>
</div>
Hasilnya akan tampak seperti ini:
ini tex biasa yang rata tengah

YANG INI H1 SAJA

KALAU YANG INI HIJAU (H1)

ini tex biasa yang rata kanan

YANG INI H1 MERAH rata kanan

KALAU YANG INI HIJAU (H1) rata kanan


ID Selector
Secara umum Penggunaan maupun cara penulisan ID Selector hampir sama dengan class selector,  yang membedakannya adalah:
  • Penggunaan ID biasanya lebih spesifik untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.
  • Penulisannya diawali dengan menggunakan tanda pagar (#) berbeda dengan Class yang menggunakan tanda titik(.) 
Demikian postingan kali ini mengenai cara menggunakan CSS Class selector dan ID selector, semoga dapat bermanfaat.