Seperti yang kita ketahui,CSS itu adalah kode yang berfungsi untuk membuat desain web lebih bagus.Akan tetapi dalam penyisipan kode CSS ke dalam kode HTML ada beberapa jenis selector yang digunakan.Berikut adalah pembahasannya.Selamat membaca !
JENIS-JENIS SELECTOR
Jika belum mengetahui pengertian selector,silahkan klik disini untuk mengetahui aturan dasar CSS terlebih dahulu.Nah,CSS sendiri memiliki jenis selector yang beragam.Berikut beberapa jenis selector yang digunakan :
- Universal Selector
- Element Type Selector
- Class Selector
- ID Selector
- Atribute Selector
UNIVERSAL SELECTOR
Universal selector berfungsi untuk memengaruhi semua tag sehingga hanya ada 1 kode CSS di dalam HTML.Universal Selector ditulis dengan menggunakan tanda "*" yang bertujuan untuk memengaruhi semua tag yang ada dalam kode HTML.Contohnya adalah sebagai berikut :
* { color:red; background-color: blue; }
Kode CSS di atas digunakan untuk membuat agar seluruh tag HTML berwarna merah dan warna latar belakang berwarna biru.
ELEMENT TYPE SELECTOR
Element type selector merupakan selector yang langsung disisipkan di dalam tag HTML nya.Dalam praktiknya ,setiap tag HTML bisa digunakan sebagai selector CSS.Contoh :
h1 { color: red;}
p { text-decoration: italic;font-size: 20px; }
Dengan menggunakan kode CSS di atas ,maka semua tag <h1> akan berwarna merah dan tag <p> akan menjadi italic dan berukuran 14 pixel.
CLASS SELECTOR
Class selector merupakan selector yang paling sering digunakan.Class selector adalah selector yang fleksibel karena hanya memengaruhi tag HTML yang memiliki atribut class dengan nilai yang kita sudah tentukan sendiri.Contoh :
.warnateks {color: blue}
.ukuranjudul { font-size: 30px; }
Setiap penamaan class selector wajib diberikan tanda titik di awal nama itu.
Setelah membuat kode CSS type Class Selector,maka jika kita ingin memengaruhi tag html dengan kode CSS,maka kita panggil dengan atribut "class"dengan cara seperti berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar Class Selector </title>
<style type="text/css">
.warnateks {color: blue}
.ukuranjudul { font-size: 30px; }
</style>
</head>
<body>
<h1 class=ukuranjudul>Judul ini akan berukuran 30px</h1>
<p class=warnateks>Teks ini akan berwarna biru</p>
</body>
</html>
ID SELECTOR
ID selector secara umum mirip dengan Class Selector ,hanya bedanya jika di Class Selector menggunakan atribut class untuk memanggil kode CSS sedangkan pada ID Selector kita menggunakan atribut "id" dalam pemanggilan kode CSS.Berikut Contohnya :
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar Class Selector </title>
<style type="text/css">
#warnateks {color: blue}
#ukuranjudul { font-size: 30px; }
</style>
</head>
<body>
<h1 id="ukuranjudul">Judul ini akan berukuran 30px</h1>
<p id="warnateks">Teks ini akan berwarna biru</p>
</body>
</html>
<html>
<head>
<title>Belajar Class Selector </title>
<style type="text/css">
#warnateks {color: blue}
#ukuranjudul { font-size: 30px; }
</style>
</head>
<body>
<h1 id="ukuranjudul">Judul ini akan berukuran 30px</h1>
<p id="warnateks">Teks ini akan berwarna biru</p>
</body>
</html>
ATRIBUTE SELECTOR
Atribute selector khusus digunakan untuk mencari tag yang memiliki atribut tertentu.Seperti tag untuk pembuatan form (textbox).Dengan demikian ,kode CSS yang memanfaatkan atribut selector akan sangat memilih terhadap tag HTML,karena sudah mengatur value dari sebuah property.Berikut contoh penggunaannya:
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar Atribute Selector</title>
<style type="text/css">
[type="text"] { background-color: blue; color: red; }
[type="password"] { background-color: blue; color: red; }
</style>
</head>
<body>
<form>
Masukkan Nama : <input type="text">
<br>
Password : <input type="password">
</body>
</html>
Pada dasarnya kita menulis kode CSS seperti ini :
[type="text"] { background-color: blue; color: red; }
[type="password"] { background-color: blue; color: red; }
Itu artinya hanya tag HTML yang memiliki atribut "type" dengan value "text" dan "password" saja yang akan dipengaruhi oleh CSS.Dan jika kita lihat hasilnya di web browser,maka pasti textbox untuk memasukkan nama dan password berwarna biru dan warna teksnya berwarna merah.
Sekian pembahasan mengenai jenis-jenis selector dalam CSS !Semoga ilmu yang dibagikan dapat bermanfaat.Terima Kasih !
<html>
<head>
<title>Belajar Atribute Selector</title>
<style type="text/css">
[type="text"] { background-color: blue; color: red; }
[type="password"] { background-color: blue; color: red; }
</style>
</head>
<body>
<form>
Masukkan Nama : <input type="text">
<br>
Password : <input type="password">
</body>
</html>
Pada dasarnya kita menulis kode CSS seperti ini :
[type="text"] { background-color: blue; color: red; }
[type="password"] { background-color: blue; color: red; }
Itu artinya hanya tag HTML yang memiliki atribut "type" dengan value "text" dan "password" saja yang akan dipengaruhi oleh CSS.Dan jika kita lihat hasilnya di web browser,maka pasti textbox untuk memasukkan nama dan password berwarna biru dan warna teksnya berwarna merah.
Sekian pembahasan mengenai jenis-jenis selector dalam CSS !Semoga ilmu yang dibagikan dapat bermanfaat.Terima Kasih !
good job gan
ReplyDeleteSolder uap