Selector-selector dalam CSS

Dengan CSS selector kita akan menentukan suatu style tertentu kepada elemen-elemen dengan pola yang kita inginkan. Selector-selector dalam CSS antara lain

1. Universal selector
   Universal selector ditandai dengan *
   Misal
   *
   {
        font-family:Verdana;
   } 
   Dengan selector ini berarti huruf default  font untuk seluruh document XHTML kita adalah Verdana
2. Descendant selector
   Selector descendant berarti selector yang merupakan turunan dari sesuatu. 
   div p 
   {
        margin-bottom: 2px;
   }
   Berarti setiap <p> yang merupakan turunan dari <div> akan diberi margin-bottom 2px. Turunan ini bisa anak, atau cucu atau cicit  dan seterusnya yang penting merupakan turunan dari <div>
3. Direct child selector
   Direct child selector berarti turunan secara langsung atau anak.
   div > p 
   {
        margin-bottom: 2px;
   }
   Dalam contoh ini, hanya <p> yang merupakan anak (turunan langsung) dari div yang akan diberikan margin-bottom 2px
4. Direct Adjacent Sibling Combinator
   Selector ini adalah untuk dua anak berdekatan yang memiliki parent yang sama misalnya:
   h1 + p
   {
       font-family:Arial;
   } 

   Pada selector di atas akan berlaku untuk contoh
   <div>
    <h1>Judul</h1>
   <p>Penjelasan</p>
   </div>
   Pada contoh di atas Penjelasan akan menggunakan font Arial 

5. Indirect Adjacent Sibling Combinator
   Untuk indirect Adjacent Sibling ini adalah seperti  Direct Adjacent Sibling  tetapi letaknya tidak harus berdekatan. Jadi dua buah anak memiliki parent yang sama meskipun tidak berdekatan.
   Selector ini adalah untuk dua anak yang memiliki parent yang sama misalnya:
   h1 ~ h2
   {
       font-family:Arial;
   } 

   Pada selector di atas akan berlaku untuk contoh
   <div>
    <h1>Judul</h1>
   <p>Penjelasan</p>
    <h2>Sub Judul</h2>
   </div>
   Pada contoh di atas Sub Judul akan menggunakan font Arial  

6. Berdasarkan attribute
   Untuk contoh based on attribute misalnya
   input[type]
   {
        border: 1px;
   } 
7. Berdasarkan nilai suatu attribute
   Contoh yang berdasarkan nilai suatu atrribut misalnya:
   input[type=’text’]
   {
        border: 1px;
   } 
8. Substring selector
   – Substring dengan permulaan tertentu,
   misalnya
   a[href^=’http://www.proweb.co.id’]
   {
       color: blue;
   }
   – Substring dengan akhiran tertentu.  
   a[href$=’.jpeg’]
   {
       color: blue;
   }
   – Substring dengan mengandung string tertentu di mana saja.  
   a[href*=’proweb’]
   {
       color: blue;
   } 

Kunjungi www.proweb.co.id untuk menambah wawasan anda.