Memahami Tanda '+', '>', '~' Pada Penggunaan CSS Selektor

 Author : hadinug, 19 February, 2014, Komentar

Ada beberapa hal yang mungkin terlewati oleh kita ketika mempelajari CSS, salah satunya mungkin penggunaan selector css pada tanda '>', '+' dan '~'. Padahal dengan mempelajari dan memahami tanda selektor '>', '+' dan '~', kita bisa membuat sebuah komponen website seperti tab, accordion, slider dan dropdown. Penasaran bukan?, tapi pada halaman ini kita akan fokus mempelajari kegunaan dari ketiga tanda tersebut.



Tanda >

Tanda ini akan menargetkan elemen-elemen yang merupakan turunan LANGSUNG dari elemen parent. Dengan kata lain Ini akan menargetkan kesemua elemen P yang merupakan anak-anak langsung dari wadah div, bukan anak-anak dari div anak.


<style type="text/css">
/*tanda >*/
  .sign-gt > p{
      color: red;
  }
  .sign-gt > p:before{
      content: "selected ";
      color:green;
  }
</style>
<div class="sign-gt">
     <p>First</p>
     <div>
         <p>Child Paragraph</p>
     </div>
     <p>Second</p>
     <p>Third</p>
</div>


Hasilnya akan terlihat seperti gambar berikut:




Tanda +

Tanda kombinator, menggabungkan dua urutan penyeleksi sederhana yang memiliki induk yang sama dan yang kedua setelah yang pertama akan di seleksi.


<style type="text/css"> 
  /*tanda +*/
  div.sign-plus div + p{ 
     color: red;
  } 
  div.sign-plus div + p:before{
     content: "selected ";
     color:green;
  }
</style>
<div class="sign-plus">
   <div>
       <p>First</p>
       <div>
  <p>Child Paragraph</p>
       </div>
       <p>Second</p>
       <p>Third</p>
   </div>
</div>

Hasilnya akan terlihat seperti gambar berikut:




Tanda ~

Mirip dengan kombinator, perbedaannya adalah bahwa ini akan memilih semua elemen yang didahului oleh mantan pemilih.


<style type="text/css"> 
  /*tanda +*/
  div.sign-asg div ~ p{ 
     color: red;
  } 
  div.sign-asg div ~ p:before{
     content: "selected ";
     color:green;
  }
</style>
<div class="sign-asg">
   <div>
       <p>First</p>
       <div>
  <p>Child Paragraph</p>
       </div>
       <p>Second</p>
       <p>Third</p>
   </div>
</div>


Hasilnya juga akan terlihat seperti gambar berikut:




Menarik bukan, hal sederhana ini nanti nya akan menjadi dasar kita membuat komponen-komponen interaktif website sperti tab, accordion, slide dan dropdown. Link demo bisa dilihat disini dan selamat mencoba :-)


 
Bagikan halaman ke sosial media
 
Tags :   css    selektor       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda