Dalam tutorial kali ini kita akan membahas mengenai jenis – jenis selector di CSS, pada tutorial part kedua kita tahu fungsi selector yang digunakan untuk memilih objek yang akan mendapatkan effect dari kode css.
Nah ternyata banyak sekali jenis selector css yang bisa anda gunakan, dalam tutorial ini warung belajar akan membahas selector yang sering digunakan, ada 5 jenis selector dasar yang akan kita bahas, baik langsung saja detailnya sebagai berikut :
Universal Selector
Universal Selector ini hanya ada 1 di dalam kode CSS, dengan menggunakan selector ini maka seluruh tag html akan mendapatkan effect dari kode css yang ditulis, bingung ya ?? baik contohnya seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selector CSS</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<p>Ini adalah paragraf</p>
<h1>ini adalah H1</h1>
<H6>ini adalah H6</H6>
<hr/>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Adi</td>
</tr>
<tr>
<td>2</td>
<td>Anton</td>
</tr>
</table>
</body>
</html>semisal kita simpan dengan nama universal_selector.html, lalu saya buka di browser :
hasilnya seluruh objek menjadi berwarna merah, hal tersebut karena kita menggunakan universal selector, yang membuat seluruh tag mendapatkan pengaruh dari penggunaan kode css.
Element Type Selector
Element Type Selector atau biasanya disebut dengan tag selector adalah selector yang merupakan tag HTML. Setiap tag HTML bisa digunakan sebagai selector pada css, jadi semisal anda ingin merubah tag <h1> menjadi warna merah, berarti h1 yang menjadi selectornya, baik contohnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selector CSS</title>
<style type="text/css">
p,h1{
color:red;
}
</style>
</head>
<body>
<p>Ini adalah paragraf</p>
<h1>ini adalah H1</h1>
</body>
</html>semisal kita simpan dengan nama tag_selector.html, lalu kita buka di browser :
maka untuk h1, dan paragraf akan menjadi warna merah, karena selector yang kita tulis adalah p,h1
Class Selector
Class Selector adalah selector yang berbeda dengan 2 tag sebelumnya, karena dengan adanya class selector, anda dapat memasangnya di tag manapun di dalam kode html anda.
Cara kerja class selector ini akan mencari seluruh tag yang memiliki attribute class yang telah dijadikan sebagai selector.
Agar tidak bingung, contohnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selector CSS</title>
<style type="text/css">
.warna_merah
{
color:red;
}
.ukuran_besar
{
font-size:40px;
}
</style>
</head>
<body>
<p class="warna_merah">Ini adalah paragraf 1</p>
<p class="ukuran_besar">Ini adalah paragraf 2</p>
<p class="warna_merah ukuran_besar">Ini adalah paragraf 3</p>
</body>
</html>perhatikan untuk penulisan class selector diawali dengan tanda titik.
setelah itu semisal kita simpan dengan nama class_selector.html, lalu kita buka di browser :
hasilnya adalah seperti gambar diatas, penjelasannya :
- Paragraf pertama menggunakan class warna_merah sehingga ditampilkan dengan warna merah, sesuai dengan selector class .warna_merah yang merubah warna menjadi merah.
- Paragraf kedua menggunakan class ukuran_besar sehingga ditampilkan dengan ukuran font adalah 40px, sesuai dengan selector class .ukuran_besar yang menset ukuran font-size 40 px
- Paragraf ketiga menggunakan 2 class yaitu warna_merah dan ukuran_besar sehingga text paragraf menjadi warna merah dengan ukuran font 40px
ID Selector
ID selector konsepnya hampir sama dengan class selector, yang menjadi berbeda adalah
- Class selector menggunakan attribute class pada tag html, tetapi untuk id selector kita menggunakan attribute id
- Class selector menggunakan awalan tanda titik pada penulisan class selector, tetapi untuk id selector kita menggunakan awalan tanda#
- Class bisa anda pasang di beberapa tag html, tetapi untuk ID disarankan hanya menggunakan di satu tag saja, karena selain untuk css, id biasanya juga digunakan untuk penanda objek yang akan dimanipulasi oleh javascript, sehingga jika dipergunakan di lebih dari 1 objek akan ada kesulitan pada saat pemanggilan dengan javascript
agar tidak bingung ini adalah contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selector CSS</title>
<style type="text/css">
#warna_merah
{
color:red;
}
#warna_biru
{
color:blue;
}
</style>
</head>
<body>
<p id="warna_merah">Ini adalah paragraf 1</p>
<p id="warna_biru">Ini adalah paragraf 2</p>
</body>
</html>semisal saya simpan dengan nama id_selector.html, lalu saya buka di browser :
penjelasan :
- Paragraf 1 ditampilkan warna merah karena kita menggunakan id=”warna_merah” dan id warna_merah tersebut telah dideklarasikan merubah warna text menjadi merah
- Paragraf 2 ditampilkan warna biru karena kita mengunakan id=”warna_biru” dan id warna_biru tersebut telah dideklarasikan merubah warna text menjadi biru
Attribute Selector
Berbeda dengan beberapa selector yang telah kita bahas sebelumnya, dengan adanya attribute selector ini anda dapat memilih attribute untuk dijadikan sebuah selector, sehingga selector bisa lebih detail lagi, baik sebagai contohnya anda ingin merubah seluruh tag yang menggunakan attribute href, maka skripnya adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Selector CSS</title>
<style type="text/css">
[href]
{
color:red;
}
</style>
</head>
<body>
<a href="https://www.warungbelajar.com">Warung Belajar</a>
<br/>
<a>Warung Belajar</a>
</body>
</html>semisal kita simpan dengan nama attribute_selector.html, lalu kita buka di browser maka hasilnya :
penjelasannya :
- Link pertama menggunakan attribute href, sehingga mendapatkan effect kode css, yang menyebabkan warna link menjadi warna merah
- Link kedua tidak menggunakan attribute href, sehingga tidak mendapatkan effect kode css, jadi warna textnya masih hitam
Jadi kurang lebih seperti itu beberapa jenis selector dasar yang ada di css, sebenarnya masih banyak lagi jenis – jenis selector yang lain, yang bisa anda gunakan.
tetapi 5 jenis selector ini yang sering digunakan karena itu warung belajar membahasnya dalam artikel ini, baik sekian dulu pembahasan mengenai jenis selector di css, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial berikutnya