16/07/2015

Dasar-dasar Selektor (Selectors) dalam CSS

16/07/2015

Meskipun ada banyak jenis selektor dalam sintaks CSS, namun sebagai permulaan kita akan fokus pada lima jenis selektor dalam CSS. Kelima jenis selektor yang akan kita bahas kali ini adalah jenis selektor yang paling banyak digunakan, yaitu :
  • Universal Selectors
  • Type Selectors
  • ID Selectors
  • Class Selectors
  • Descendant Selectors
Tapi jika sebelumnya anda masih asing dengan istilah selector (selektor), pelajari terlebih dahulu bagian ini : Dasar-dasar CSS.
Dan sebagai permulaan, anggap saja kita memiliki dokumen HTML dengan struktur seperti berikut

<div id="content">
    <div id="left"><h1>Judul</h1></div>
    <div id="right"> 
          <p>Satu dua tiga empat lima</p>
          <p>enam tujuh delapan sembilan sepuluh</p>
          <i>sebelas duabelas tigabelas empatbelas </i>
          <p class="one"><span> hanya contoh</span></p>
          <i class="one">sekian dan terimakasih </i>
    </div>
</div>

Kemudian kita akan memberikan sentuhan CSS pada dokumen HTML tersebut dengan memanfaatkan kelima jenis selektor yang paling umum digunakan seperti yang sudah saya sebutkan di atas disertai dengan pengertian sederhana dari masing-masing jenis selektor.

1. Universal Selectors

Universal Selectors (Selektor Universal) adalah jenis selektor yang bersifat umum dan menyeluruh. Artinya dengan menggunakan universal selectors maka semua jenis atau tipe elemen HTML akan menjadi target sasaran dalam gaya CSS yang akan kita tentukan, dengan catatan selama kita tidak menetapkan gaya CSS dengan selektor lain yang lebih khusus, maka selektor universal akan bekerja dengan baik. Kita hanya perlu menuliskan tanda bintang * lalu diikuti dengan deklarasi CSS (properti dan nilainya).

2. Type Selectors

Jika selektor universal menentukan gaya CSS pada semua jenis atau tipe elemen HTML, maka Type Selectors secara khusus akan menyeleksi - menentukan format gaya CSS - elemen HTML berdasarkan tipe elemen tertentu dalam sebuah dokumen. Tipe elemen HTML ini kemudian disebut dengan Tag HTML, yaitu struktur yang dikenali sebagai suatu instruksi untuk memformat objek pada sebuah tampilan dokumen HTML. Web browser akan membaca kemudian menampilkannya sesuai dengan yang diperintahkan. Ada sekian banyak tag name dalam HTML seperti tag heading (<h1>,  <h2>,  <h3> dll), paragraf (<p>), format teks (<i>, <b>, <a>, dll) dan masih banyak lagi, pelajari pada bagian ini. Dengan CSS kita dapat mengintruksikan gaya pemformatan seperti apa yang kita kehendaki pada tag-tag HTML tersebut. Kita dapat menyeleksi tag-tag tersebut sebagai selector dalam CSS dengan rumus penulisan seperti berikut :

Contoh

h1{property:value}

p {property:value}

a {poperty:value}

Sebagai contoh, kita masih memanfaatkan struktur dokumen HTML di atas, kemudian kita akan menerapkan gaya tampilan pada tag "(<p>)" dengan menuliskan CSS seperti ini
p {font-style:normal; font-weight:bold; text-align: right; color: red}

Mari kita lihat hasilnya pada kolom di bawah ini

Dari contoh tampilan dokumen HTML di atas, tanpa menghilangkan CSS universal selectors yang sudah kita tentukan sebelumnya pada sub bab Universal Selectors kita menambahkan type selectors dengan menerapkan CSS pada tag p. Browser akan menerjemahkan bahwa secara default (kondisi sebenarnya / normal) dokumen HTML tersebut akan memiliki warna teks biru yang dihasilkan dari gaya CSS universal selectors yang sebelumnya sudah kita terapkan, kecuali pada tipe elemen yang memiliki tag p, sebab kita telah menentukan aturan yang lebih khusus dengan memanfaatkan type selectors tersebut.

3. ID Selectors

Sifat dasar dari sebuah ID dalam tag HTML adalah unik, artinya tidak diizinkan ada dua atau lebih ID dengan nama sejenis, tidak seperti class. Selektor css untuk ID diawali dengan tanda pagar # kemudian nama id. Kalau meihat dokumen HTML di atas (bagian atas dari artikel ini) kita akan menemukan tag HTML dengan ID tertentu. Ciri-cirinya adalah tag yang disisipi dengan kode id=" (nama id) ". Nama ID itulah yang akan menjadi selektor dalam sintaks CSS. Baiklah di sini saya akan menentukan gaya CSS pada ID HTML dengan nama left lebih tepatnya bagian ini : <div id="left"> dengan penulisan CSS berikut

Contoh

#left {color: white; background: black}
dan hasilnya ...

4. CLASS Selectors

Berbeda dengan ID, CLASS boleh memiliki lebih dari satu nama dalam sebuah dolumen HTML. Selektor css untuk CLASS diawali dengan tanda titik (.) kemudian nama CLASS. Kalau meihat dokumen HTML di atas (bagian atas dari artikel ini) kita akan menemukan tag HTML dengan CLASS tertentu. Ciri-cirinya adalah tag yang disisipi dengan kode class=" (nama class) ". Nama class itulah yang akan menjadi selektor dalam sintaks CSS. Di sini saya akan menentukan gaya CSS pada CLASS HTML dengan nama one lebih tepatnya bagian ini : <div class="one"> dengan penulisan CSS berikut

Contoh

.one{color: green}
bedakan hasilnya..

5. Descendant Selectors

Pada sub-bab ini, kita akan mengambil contoh lain dari dokumen HTML yang sedikit lebih rumit untuk memberi gambaran yang lebih jelas tentang Descendant Selectors.

Contoh

<div id="doukumen">

    <div class="konten-1">
      <div class="elemen-1">
        <div class="elemen-2">
          <div class="elemen-3">
          </div>
        </div>
      </div>
    </div>

    <div class="konten-2">
      <div class="elemen-1">
        <div class="elemen-2">
          <div class="elemen-3">
          </div>
        </div>
      </div>
    </div>

</div>

Perhatikan setiap nama ID dan Class dari masing-masing elemen. Kita menemukan dalam struktur dokumen HTML di atas ada satu ID dengan nama "dokumen" dimana ID tersebut membungkus dua induk elemen CLASS dengan nama "konten-1" dan "konten-2: dimana masing-masing induk elemen memiliki tiga keturunan Class dengan nama "elemen-1, elemen-2, dan elemen-3".
Jika diilustraskan, dokumen HTML diatas akan membentuk struktur seperti berikut

<div id"dokumen"><div>
<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

<div class"koneten-2"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

Jika kita menambahkan gaya CSS pada Class elemen-2 maka otomatis ada dua elemen yang menjadi sasaran CSS, sebab elemen dengan Class elemen-2 ada pada dua tempat, pertama sebagai anak elemen dari "konten-1", kedua sebagai anak elemen dari "konten-2", sementara (misalnya) kita hanya ingin menyeleksi elemen dengan Class elemen-2 yang merupakan elemen keturunan dari ID "konten-1" bukan "konten-2". Untuk mengatasi hal tersebut, perlu menuliskan selektor yang lebih spesifik. Di sinilah Descendant Selectors bekerja. Perhatikan penulisan Descendant Selectors berikut

Contoh

 konten-1 .elemen-2 {color: red; font-weight: bold;} 

dan hasilnya...

<div id"dokumen"><div>
<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

Tampilan dokumen HTML di atas menunjukkan bahwa elemen Class dengan nama "elemen-2" yang merupakan elemen keturunan dari ID "konten-1" adalah target gaya CSS, sementara elemen Class dengan nama "elemen-3" ikut terseleksi sebab pada hakikatnya "elemen-3" masih merupakan elemen keturunan dari elemen Class dengan nama "elemen-2". Begitulah bentuk struktur HTML bekerja pada browser dan Descendant Selectors mampu mmemberikan sentuhan format CSS sesuai dengan tugasnya.