Blog Pintasku: Mengenal Jenis Selector Dasar Dalam CSS

Pada kesempatan kali ini Blog Pintasku membahas seputar Belajar Dasar CSS, sebelumnya saya pernah membahas Cara Menginput CSS Ke Dalam HTML, nahh untuk sekarang saya akan mengenalkan Jenis Jenis Selector Dasar Dalam CSS.

Seperti yang saya sudah pernah jelaskan kalau Selector itu merupakan sebuah pola, dimana pola ini berfungsi untuk mencari suatu Tag di dalam HTML yang akan diberikan style. Selector dalam CSS itu ada banyak jenisnya tetapi yang paling dasar itu ada 5 jenis. Apa saja ? silahkan baca dibawah ini.

Jenis - Jenis Selector Dasar Dalam CSS

1. Element Type Selector

Element Type Selector atau bisa juga disebut dengan Tag Selector merupakan jenis selector yang paling dasar, di antara jenis selector lainnya karena Type Selector ini merupakan sebuah istilah di dalam CSS untuk sebuah Selector yang nilainya itu adalah Tag HTML itu sendiri. Type selector biasanya digunakan untuk mengatur style dasar karena selector ini bisa menangkap seluruh Tag HTML.

Berikut ini adalah contoh Element Type Selector :

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

Pada contoh kode di atas nantinya style yang akan tampil adalah pada bagian H1 semua tulisannya akan bergaris bawah dan seluruh tag akan berukuran 14px dan berwarna biru.

Efek yang ditimbulkan dari penggunaan Element Type Selector ini akan membuat tag yang berada di dalam tag yang menggunakan Element Type Selector akan terkena jadi jika ada tag atau tag didalam tag maka tag dan tag juga akan terkena efeknya.

2. Class Selector

Class Selector itu adalah jenis selector yang umum atau sering digunakan karena biasanya Class Selector ini digunakan jika kita ingin menerapkan style yang berbeda tetapi pada tag yang sama, sederhananya, Selector jenis class ini akan mencari tag yang memiliki atribut class dan memiliki nilai (value) yang sesuai.

Supaya bisa lebih mengerti silahkan perhatikan contoh penggunaan Selector jenis class di dalam HTML.

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS</title>
<style>
h1 {color:black}
.paragraf {color:blue;}
</style> 
</head> 
<body>
<h1>Penggunaan Class Selector</h1> 
<p class='paragraf'>paragraf ini menggunakan atribut classs</p>
<p>paragraf ini tidak menggunakan atribut classs</p> 
</body>

3. ID Selector

Nahh ID Selector juga termasuk kedalam selector yang sering digunakan tetapi tidak terlalu sering, berbeda dengan class selector. Penggunaan ID Selector itu sama halnya dengan Class Selector yang jadi perbedaanya adalah Class Selector menggunakan atribut class sedangkan ID Selector menggunakan atribut id.

Penggunaan ID Selector ini hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama. Karena atribut ID tidak hanya digunakan sebagai Selector CSS saja melainkan bisa dipakai untuk Javascript dan atribut id ini juga termasuk berperan sebagai kode unik untuk setiap Tag. Oleh karena itu penggunaan atribut ID haruslah unik dan tidak boleh sama.

Berikut ini adalah contoh penggunaan atribut ID di dalam HTML.

<h1 id="Judul_pertama">ini adalah judul pertama</h1>
<h2 id="Judul_kedua">ini adalah judul pertama</h2>
<p id="paragraf_pertama"> Paragraf ini akan tampil berbeda karena menggunakan id selector</p>

Nahh sedangkan untuk contoh penggunaan ID Selector di dalam CSS sebagai berikut.

#khusus {
 font-size: 12px;
 color: blue;
 }
#judul_pertama { 
             font-size:20px
             }
#judul_kedua {
      color: red;
      }

Perlu diketahui penggunaan tanda "#" di dalam CSS itu untuk memberikan tanda bahwa kita mencari tag yang memiliki atribut id.

4. Universal Selector

Dari namanya juga pasti sobat sudah tahu apa yang di maksud dengan Universal Selector ini, Universal artinya menyeluruh kalau secara sederhananya Universal Selector ini yang bisa membuat seluruh tag di dalam sebuah halaman html terkena efeknya atau style. Jadi penggunaan Universal Selector ini hanya ada 1. Universal Selector ini ditandai dengan tanda "*".

Berikut ini adalah contoh kode Universal Selector.

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

Keterangan : Pada kode di atas itu bertujuan membuat seluruh tulisan menjadi berwarna putih dan menggunakan background berwarna hitam.

5. Atribute Selector

Atribute Selector atau bisa juga Selector Atribut, selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang sesuai. Bahkan Selector ini sangat Spesifik tetapi meskipun spesifik masih jarang digunakan di dalam mendesain halaman web.

Supaya bisa lebih mudah dimengerti silahkan perhatikan contoh penggunaan Selector atribut dalam kode CSS berikut ini.

[href] {
       color:red ;
       }

Seperti yang terlihat pada contoh di atas, itu adalah contoh bentuk CSS dari Selector Atribut, dan perlu di ingat, setiap Selector atribut itu harus berada dalam kurung siku "[....]".

Kode CSS Selector Atribut disana menunjukan untuk atribut [href] maka seluruh atribut [href] akan terkena efeknya. atribut href biasanya sering ditemukan di dalam tag <a> jadi setiap atribut hyperlink yang menggunakan atribut href akan terkena efeknya, begitu juga sebaliknya jika tidak digunakan atribut href maka tidak akan terkena efeknya.

Sedangkan untuk contoh kode HTML dari tag <a> yang menggunakan atribut href sebagai berikut.

<a href=http://majalahweb.com/halamancontoh.html>Halaman contoh</a>

Nahh cukup sekian dulu tentang Mengenal Jenis Selector Dasar Dalam CSS, sebenarnya masih banyak jenis selector itu seperti Selector pseudo, Selector Child dan lain lain, mungkin yang lainnya akan saya jelaskan di kemudian hari. Semoga artikel ini bisa membantu sobat dalam Belajar Dasar CSS, terimakasih

Mengenal Jenis Selector Dasar Dalam CSS

Jenis - Jenis Selector Dasar Dalam CSS

1. Element Type Selector

2. Class Selector

3. ID Selector

4. Universal Selector

5. Atribute Selector

No comments:

Post a Comment

Mengenai Saya