Mengenal Jenis-jenis Selector Dalam CSS

Kuy Belajar - Mengenal Jenis-jenis Selector Dalam CSS. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi di blog kuy-belajar, sebelumnya kita sudah membahas materi pertama kita tentang Pengertian Selector, Property dan Value beserta fungsinya pada CSS kita akan menyambung pembahasan tersebut yaitu dengan materi Mengenal Jenis-jenis Selector Dalam CSS. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!

Di dalam CSS ini memili berbagai jenis selector yang bervariasi, dan dalam penggunaannya pun tergantung pada kebutuhan kita dalam mendesain sebuah website. Dan dalam kesempatan kali ini setidaknya kita akan membahas sebanyak 5 selector dasar di dalam CSS. Namun sebenarnya selector di dalam CSS ini bukan hanya 5 itu saja. Tetapi karena kebanyakan kasus, dengan kelima selector tersebut pun sudah sangat mencukupi untuk membangun sebuah halaman website HTML + CSS.

Pengertian selector yaitu sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang memiliki atribut class=judul. CSS memiliki banyak sekali jenis selector, kita akan membahasnya satu persatu:

Mengenal Universal Selector

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini berfungsi untuk ‘mencari’ semua tag yang ada di dalam CSS.

Berikut ini adalah contoh penulisan universal selector di dalam CSS.

* {
   color: blue;
   background-color: white;}
  }

Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Berikut ini adalah contoh penulisan element type selector di dalam CSS.

h1 { 
   text-decoration: underline;
   }
 
p { 
  font-size:14px;
  }

Pada contoh kode CSS diatas akan membuat semua tag <h1> akan di beri efek bergaris bawah, dan seluruh font dari tag <p> akan berukuran 14 pixel.

Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>.

Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai.

Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya sebagai berikut:

.paragraf_pertama {
                  color: red;
                  }
 
.judul { 
       font-size:20px;
       }

.penting { 
       color:red;
       font-size: 1em;
       }

Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama dari class. Untuk contoh yang kita gunakan, seluruh class yang memiliki nilai “paragraf_pertama”, warna text akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.

ID Selector

ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id.
Berikut ini adalah contoh penulisan Id selector di dalam CSS.

<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>
 
<h1 id=”judul_utama”>Judul Artikel</h1>
 
<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.

Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:

#paragraf_ pembuka {
                   color: red;
                   }
 
#judul utama { 
             font-size:20px;
             }

Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.

Attribute Selector

Selector dasar terakhir kita adalah attribute selector. Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {
       font-size:20px ;
       }
 
[type="submit"] {
                width:30px;
                }

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung siku “[” dan “]”.

[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.

Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.

Saya rasa itu lah pembahasan kita tentang Mengenal Jenis-jenis Selector Dalam CSS. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi selanjutnya : Contoh Cara Penggunaan Selector Dalam CSS