6 Jenis Selector Dalam CSS Beserta Fungsinya

Jenis-Jenis Selector CSS

Dalam CSS, selector adalah pola yang digunakan untuk memilih elemen yang ingin Anda beri style.

Dibawah ini saya akan membahas Jenis-jenis selector yang ada dalam css, saya akan membuat contoh-contoh dari masing-masing selector. ada 6 jenis selector dalam css yang wajib kamu ketahui.

1. Selector * (Universal Selector)

Selector * adalah selector yang berfungsi memilih semua element.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
* { 
 background-color: yellow;
}
</style>
</head>
<body>

<h1>Ini Judul!</h1>
<p>Ini Paragraf.</p>

</body>
</html>

Dengan contoh diatas semua elemen html background nya akan berwarna kuning (yellow)

Contoh 2

Perintah pada contoh selector all (*) yang kedua ini artinya seperti ini, Pilih semua elemen di dalam elemen <div> dan atur warna background nya ke kuning.

2. Selector element

Element selector (tag selector) adalah selector yang isinya elemen html, seperti element p, h1-h6 dan lain sebagainya.

misalnya kita mau membuat text pada elemen <p> menjadi rata tengah (center) maka selectornya adalah p. untuk lebih jelas silakan perhatikan contoh elemen selector dibawah ini.

Contoh Element Selector

<!DOCTYPE html>
<html>
<head>
<style>
p {
 text-align: center;
 color: red;
} 
</style>
</head>
<body>

<p>Paragraf Tag P</p>
<p id="para1">Paragraf Pakai ID</p>
<p>Ini juga element p</p>

</body>
</html>

Dalam contoh diatas saya membuat seletor p, semua teks pada element p akan menjadi rata tengah dan warnanya warna merah.

Selector element ini memiliki beberapa model seperti

  • selector elemen,elemen
    contohnya

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1, p { 
     background-color: yellow;
    }
    </style>
    </head>
    <body>
    
    <h1>Ini Judul!</h1>
    <p>Ini Paragraf.</p>
    
    </body>
    </html>
  • Element element
    div p {
    background-color: yellow;
    }
  • Element>element
    div>p {
    background-color: yellow;
    }
  • Element+element
    div + p {
    background-color: yellow;
    }

3. ID Selector

id selector ini berfungsi untuk membuat style pada elemen yang memiliki id , elemen selain yang memakai id tertentu tidak akan ikut terstyle.

contoh

<!DOCTYPE html>
<html>
<head>
<style>
#para {
 text-align: center;
 color: red;
} 
</style>
</head>
<body>

<p>Paragraf Element P</p>
<p id="para">Paragraf Pakai ID</p>
<p>Ini juga element p</p>

</body>
</html>

bisa kita lihat pada contoh diatas, element yang memakai id “para” akan berwarna merah dan textnya di tengah, sedangkan element p yang lain tidak ikut berubah, kenepa? karena elemen html yang lain tidak id.

4. Class Selector

Class selector berfungsi untuk membuat style pada class tertentu, seluruh tag yang memiliki class ini akan berubah sesuai yang kita style.

Contoh Class Selector

<!DOCTYPE html>
<html>
<head>
<style>
.center {
 text-align: center;
 color: red;
}
</style>
</head>
<body>

<h1 class="center">Merah dan di Tengah</h1>
<p class="center">Tag P juga ikut terinclude</p> 
<p>Paragraf Element P</p>
<p id="para">Paragraf Pakai ID</p>

</body>
</html>

dalam contoh diatas saya membuat class “center” di tag H dan P, semua element yang memiliki class center ini akan di style oleh css. teks nya akan rata tengah dan warnanya berubah menjadi merah.

sedangkan elemen html yang lain yang tidak memiliki class center tidak akan berubah.

kita bisa saja membuat style dengan class selector pada tag tertentu saja, misalnya hanya pada tag P saja.

Contoh Class Selector 2

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
 text-align: center;
 color: red;
}
</style>
</head>
<body>

<h1 class="center">Tidak Merah dan Tidak di Tengah</h1>
<p class="center">Tag P juga ikut terinclude</p> 
<p>Paragraf</p>
</body>
</html>

Pada contoh ini saya hanya menambah hurup p didepan selector .center dan kita lihat hasilnya, css hanya membuat style pada tag p yang memiliki calss “center” saja.

selain itu walaupun tag h1 memiliki class center tidak akan berubah, dan tag p yang lain juga tidak akan berubah.

5. Grouping Selector

Grouping Selector adalah selector yang digunakan untuk tag yang memiliki style sama

misalnya

h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }

penulisan selector seperti ini tidak direkomendasikan, karena style pada semua selector ini sama, kita cukup membuat satu selector saja. seperti dibawah ini

h1, p, a { background-color: #66666; }

penggabungan ini lah yang disebut dengan grouping selector.

Contoh Group Selector

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
 text-align: center;
 color: red;
}
</style>
</head>
<body>

<h1 class="center">Merah dan Tidak di Tengah</h1>
<h2>heading Kedua!</h2>
<p class="center">Tag P juga ikut terinclude</p> 
<p>Paragraf</p>

</body>
</html>

bisa kita lihat semua style dari tag h1, h2, dan p sama-sama merah dan berada di tengah.

selector group ini banyak digunakan untuk tag yang memiliki style yang sama. dan selector group ini berguna untuk menghemat penulisan kode css.

6. Attribute Selector

attribute selector adalah Selector digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan. misalnya seperti href dan target.

Contoh selector Attribute

<html>
<head>
<style>
[href] {
 font-size:20px ;
 }
a[target] { 
 background-color: yellow;
}
</style>
</head>
<body>
<p>
<a href="matakuliah.html">Mata kuliah</a>
Digunakan untuk menghubungkan dengan halaman matakuliah pada satu
web site.
</p>
<p>
<a href="http://wordpress.org/" target=_blank>Link Ke WordPress</a>
Link yang menghubungkan ke WordPress.org.
</p>
</body>
</html>

dari contoh diatas kita bisa membuat style pada atribut href, atribut target, saya merubah ukuran font pada setiap atribut ini dan membuat warna backgraound atribut target menjadi kuning. semua atribut harus diletak didalam tanda kurung siku “[]”.

melihat contoh-contoh dari ke 6 jenis selector diatas sepertinya memang ribet dan bikin pusing, tapi jangan terlalu dipikirkan apalagi untuk dipusingkan, kita akan bisa karena sudah terbiasa.

jadi biasakan saja untuk mengetik selector-selector css tersebut dengan begitu anda akan mengingat sedikit demi sedikit.

BAB Selanjutnya
Memahami Cara Penggunaan Selector CSS

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas