CSS selector - Belajar CSS otodidak.

Apa itu CSS selector ?

CSS selector bisa diartikan penyeleksi yang fungsinya menyeleksi elemen HTML dengan atribut tertentu yang akan diubahsuaikan.

Format dasar penulisan CSS :

Selector sendiri terdiri dari 5 macam yaitu :

1. Selektor Basic

   Selektor basic terbagi menjadi 2 :
   Selektor Group Jenis selektor yang menyeleksi elemen berdasarkan :
   tag elemen id elemen class elemen.
   Selektor Universal :
   Jenis selektor yang menggunakan tanda (*) untuk menyeleksi seluruh elemen.

2. Selektor [attribute]

   Selektor ini terdiri dari :
   [attribute=value]
   [attribute~=value]
   [attribute|=value]
   [attribute^=value]
   [attribute$=value]
   [attribute*=value]

3. Selektor kombinator

   Selektor yang menyeleksi elemen berdasarkan tag elemen induknya.
   Selektor ini terbagi menjadi :
   Selektor turunan (dipisahkan dengan spasi)
   Selektor anak (dipisahkan dengan tanda >)
   Selektor untuk elemen yang bersebelahan (dipisahkan dengan tanda +)
   Selektor untuk elemen umum (dipisahkan dengan tanda ~)

4. Selektor Pseudo (semu)

   /*-- Penulisan CSS pseudo --*/
   selector::pseudo-element {
     property: value;
   }

   
   

   Penulisan selektor ::pseudo (double colon) atau :pseudo (single colon) secara fungsi :
   Jika terdapat elemen yang sebelumnya menggunakan selektor :pseudo,
   Kemudian ditambahkan selektor baru dalam baris CSS yang berbeda dengan selektor ::pseudo
   maka ::pseudo (double colon) secara otomatis akan menggantikan fungsi :pseudo (single colon).
   Dengan kata lain (double colon) memiliki dampak lebih kuat daripada (single colon).

   
   

   Selektor pseudo atau selektor semu adalah selektor untuk elemen yang pada dasarnya secara visual tidak ada atau belum ditampilkan.
   Elemen semu (Pesudo element) tidak terikat pada class ataupun id elemen.
   Elemen semu bisa diaplikasikan cukup dengan <tag> saja, meskipun pada elemen tersebut terdapat id ataupun class.
   Contoh :
   
   Arahkan kursor di teks ini untuk melihat elemen semu (pseudo)
   Link berikut ini akan berwarna merah setelah diklik.
   Klik link ini untuk melihat efek dari elemen semu.

5. Selektor Pseudo select

   1.::first-line
   Berikut ini properti yang bisa diaplikasikan untuk penggunaan selektor ::first-line
   • font
   • color
   • background
   • margin
   • padding
   • border
   • text-decoration
   • vertical-align (hanya jika elemen {float: none;}
   • text-transform
   • line-height
   • float
   • clear

   
   

   2.::first-letter
   Berikut ini properti yang bisa diaplikasikan untuk penggunaan selektor ::first-letter
   • font properties
   • color properties
   • background properties
   • margin properties
   • padding properties
   • border properties
   • text-decoration
   • vertical-align (hanya jika elemen {float: none;}
   • text-transform
   • line-height
   • float
   • clear
   3.::before
   4.::after
   5.::marker
   6.::selection
   

Selektor Basic - Group

Ini merupakan selektor yang paling umum digunakan.
Selektor basic berfungsi untuk menyeleksi elemen berdasarkan <tag>, class dan id. Apabila dalam satu halaman terdapat beberapa atau banyak elemen dengan tag yang serupa maka secara otomatis elemen tersebut akan terkena dampak dari pengaturan CSS pada selector tersebut.

• Selektor berdasarkan tag elemen (menyeleksi semua elemen berdasakan tag-nya).
  Contoh:
  Pada elemen <div> terdapat beberapa elemen <p>.
  Pada kolom CSS, selector yang digunakan adalah tag elemen p, maka semua elemen p akan terpengaruh oleh pengaturan dalam CSS tersebut.
  1. html

     <div>
      <p> paragraf </p>
      <p> paragraf </p>
      <p> paragraf </p>
     </div>

  2. css

     p {
       color: blue;
       background: yellow;
       }

  Hasil :

  paragraf

  paragraf

  paragraf

• Menyeleksi identitas elemen id dengan diwakili tanda tagar (#) diawal nama selektor.
  1. html<div id='nama-id'> elemen </div>
  2. css#nama-id {/* kode CSS */}
• Menyeleksi kelas elemen class diwakili dengan tanda titik (.) diawal nama selektor.
  1. html<div class='nama-class'> elemen </div>
  2. css.nama-class {/* kode CSS */}

Selector sangat penting dalam coding desain template, untuk menyeleksi elemen dari sekian banyak elemen yang terdapat dalam template agar dengan mudah diubahsuaikan.

Contoh penggunaan CSS selector sederhana

• Selector id

  <span id='merah'> Teks span pertama #merah</span>
  
  <span id='biru'> Teks span kedua #biru</span>

  
  CSS mengatur warna teks pada 2 elemen yang serupa, diseleksi berdasar id

  #merah {color:red;}
  
  #biru {color:blue;}
  

  Lihat hasil

  Selektor id

  Teks span pertama #merah
  Teks span kedua #biru
• Selector class

  <span class='ijo' id='merah'> Teks span pertama #merah</span>
  <span class='ijo' id='biru'> Teks span kedua #biru</span>

  
  Mengatur latar belakang 2 elemen berdasar class, dimana letak selektor class berada dalam satu elemen dengan selektor id.

  .ijo {background:greenyellow;}
  #merah {color:red;}
  #biru {color:blue;}

  Lihat hasil

  Selektor class

  Teks span pertama #merah
  Teks span kedua #biru

Contoh alternatif :

<p class='ijo' id='merah'> Teks paragraf pertama #merah</p>
<p class='ijo' id='biru'> Teks paragraf kedua #biru</p>

.ijo {

background:greenyellow

padding: 10px; /* jarak teks didalam tag <p>*/

margin: 5px; /* jarak antara kedua tag <p>*/

font-weight: bold; /* menebalkan format teks*/

}

#merah {color:red;}

#biru {color:blue;}

Lihat hasil

Contoh alternatif

Teks paragraf pertama #merah

Teks paragraf kedua #biru

⇐ Sebelumnya

Selanjutnya ⇒