#CSS

Belajar CSS #2 - Selector pada CSS

Frisko Mayufid
blog thumbnails

CSS Selector

Digunakan untuk memilih atau mencari element HTML mana yang ingin di ubah style nya.

CSS Selector dapat kita bagi menjadi 5 jenis yaitu :

  1. Simple selectors (memilih elemen HTML berdasarkan dari name, id atau class)
  2. Combinator selectors (memilih elemen HTML berdasarkan hubungan elemen tersebut)
  3. Pseudo-class selectors (memilih elemen HTML berdasarkan kondisi elemen tersebut)
  4. Pseudo-elements selectors (memilih dan hanya mengubah bagian tertentu dari elemen tersebut)
  5. Attribute selectors (memilih elemen berdasarkan atribut tertentu atau yang mempunyai nilai atribut)

Tenang tenang..

Jangan sampai temen temen terjebak istilah inggris diatas, karena akan lebih mudah jika kita sudah paham konsepnya nanti.

Kita akan mulai bahas dari paling mudah dulu,

1. Simple CSS Selector

Pada jenis ini, kita memilih elemen HTML berdasarkan dari nama elemen, nama id maupun nama class.

Menggunakan nama elemen selector
  
    p {
      font-size: 30px;
      color: red;
    }
  

Kode diatas, pada elemen <p> akan diubah oleh kode css diatas menjadi ukuran 30 piksel dan menjadi berwarna merah.

Elemen Selector 1

Menggunakan id elemen selector
  
    #title {
      text-align: center;
      color: blue;
    }
  

Kita bisa menggunakan atribut HTML id untuk mengubah style pada CSS.

Elemen id bersifat unik pada tiap halaman web, jadi selector id biasanya hanya digunakan untuk memilih satu elemen unik yang yang memiliki id tersebut.

Untuk memilih selector id, kita wajib menambahkan tag # sebelum nama id, misal #title pada contoh kode diatas.

Kode diatas, pada elemen yang mempunyai ID #title akan diubah oleh kode css diatas menjadi rata tengah dan teks menjadi berwarna biru.

Elemen Selector 2

Menggunakan class elemen selector
  
    .list-item {
      color: green;
    }
  

Kita bisa menggunakan atribut HTML class untuk mengubah style pada CSS.

Untuk memilih selector class, kita wajib menambahkan tag . sebelum nama id, misal .list-item pada contoh kode diatas.

Kode diatas, pada elemen yang mempunyai class .list-item akan diubah oleh kode css diatas dengan teks menjadi berwarna hijau.

Elemen Selector 3

2. CSS Combinators selectors

Maksud dari combinator disini adalah relasi antara selector.

Karena CSS selector dapat memiliki lebih dari satu selector. Diantara simple selector (Jenis selector pertama), kita dapat menambahkan combinator.

Ada 4 tipe dari kombinator pada CSS yaitu :

  • - Selector descendant / turunan (spasi)
  • - Selector child (>)
  • - Selector adjacent siblings (+)
  • - General sibling selector (~)
Selector descendant / turunan

Selector turunan akan mencocokkan semua elemen yang mana merupakan turunan dari elemen yang telah ditentukan.

Misal nya adalah elemen <h1> yang merupakan turunan dari elemen <div>

  
    <div>
      <h1>Ini adalah elemen H1</h1>
    </div>
  

Jika Saya ingin memilih elemen <h1> menggunakan selector turunan maka caranya adalah dengan memasukan div h1 kemudian properti elemen yang ingin diubah.

  
    div h1 {
      text-align: center;
      color: green;
    }
  

Hasilnya adalah

Elemen Turunan

Selector child

Selector child (anakan) akan memilih semua element yang merupakan anakan dari elemen yang di tentukan.

Misal nya adalah elemen <p> yang merupakan turunan dari elemen <div>

  
    <div>
      <h1>Ini adalah elemen H1</h1>
      <p>Ini adalah paragraf 1</p>
      <p>Ini adalah paragraf 2</p>
    </div>
  

Jika Saya ingin memilih elemen <p> menggunakan selector child maka caranya adalah dengan memasukan div > p kemudian properti elemen yang ingin diubah.

  
    div > p {
      text-align: center;
      color: red;
    }
  

Hasilnya adalah

Elemen Child

Selector adjacent siblings

Selector adjacent siblings akan memilih semua element yang "adjacent siblings" dari elemen yang di tentukan.

Elemen sibling (saudara) ini harus memiliki satu level yang sama atau parent yang sama pada HTML, dan "adjacent" disini berarti element setelah elemen yang telah ditentukan (paling dekat).

Misal nya adalah akan memilih semua elemen <p> yang mana diletakan setelah elemen <div> .

  
    <div>
      <p>Ini adalah paragraf 1</p>
      <p>Ini adalah paragraf 2</p>
    </div>
    <p>Ini adalah paragraf 3</p>
    <p>Ini adalah paragraf 4</p>
  

Maka caranya adalah dengan memasukan div + p kemudian properti elemen yang ingin diubah.

  
    div + p {
      text-align: center;
      color: red;
    }
  

Hasilnya adalah

Elemen adjacent sibling

General sibling selector

General sibling selector akan memilih semua element yang bersaudara dari elemen yang di tentukan.

Misal nya adalah akan memilih semua elemen <p> yang mana diletakan setelah elemen <div> .

  
    <div>
      <p>Ini adalah paragraf 1</p>
      <p>Ini adalah paragraf 2</p>
    </div>
    <p>Ini adalah paragraf 3</p>
    <p>Ini adalah paragraf 4</p>
  

Maka caranya adalah dengan memasukan div ~ p kemudian properti elemen yang ingin diubah.

  
    div ~ p {
      text-align: center;
      color: red;
    }
  

Hasilnya adalah

Elemen general sibling

3. Pseudo-class selectors

Pseudo-class selector digunakan pada elemen yang memiliki kondisi tertentu.

Contohnya adalah, bisa digunakan saat :

Mengubah style saat pointer mouse diatas element tertentu.

Mengubah style link saat sebelum atau sesudah di klik.

Sintaks dari pseudo-class ini adalah :

  
    selector:pseudo-class {
      property: value;
    }
  

Contoh kita akan mengubah style elemen <a> pada berbagai kondisi

  
    /* style link sebelum diklik */
    a:link {
      color:red;
    }
    /* style link setelah diklik */
    a:visited {
      color:green;
    }
    /* style link saat di hover */
    a:hover {
      color:yellow;
    }
  

Maka style elemen <a> ini akan berubah sesuai kondisi..

Untuk lebih lengkap nya silahkan kunjungi CSS pseudo-class

4. Pseudo-elements selectors

CSS Pseudo-elemen digunakan untuk mengubah style bagian dari elemen yang telah ditentukan.

Contohnya..

Mengubah style huruf pertama atau garis dari sebuah elemen.

Menambahkan style sebelum dan sesudah konten dari elemen.

Sintaks dari pseudo-elemen ini adalah :

  
    selector:pseudo-elemen {
      property: value;
    }
  

Contoh disini akan mengubah style huruf line pertama

  
    p::first-line {
      color: green;
    }
  

Maka hasilnya adalah teks line pertama akan berwarna hijau

Untuk lebih lengkap nya silahkan kunjungi CSS pseudo-elemen

5. Attribute selectors

Attribut selector digunakan untuk mengubah style elemen menggunakan attribut yang telah ditentukan.

Contohnya adalah mengubah style semua elemen <a> yang mempunyai atribut target

  
    a[target] {
      background-color: green;
    }
  

Maka semua elemen <a> yang mempunyai atribut target akan mempunyai background berwarna kuning.

Untuk lebih lengkap nya silahkan kunjungi CSS pseudo-elemen

Itulah penjelasan mengenai penggunaan selektor pada CSS,

Bila ada yang ingin ditanyakan atau koreksi silahkan berkomentar di bawah yaa. 😎

Sankyu!