 |
| sumber gambar : pintasku.net |
Selector adalah sebuah pola yang digunakan untuk mencari suatu tag di dalam HTML.Mari kita membahas semua selector dengan memulai satu persatu.
Tag Selector
Tag selector merupakan sebuah nilai yang merupakan tag html itu sendiri.Setiap tag html bisa digunakan sebagai selector, entah itu tag b, p, h1, h2, dsb.Dan semua tag tersebut akan di tangkap oleh selector ini.Contoh penulisan Tag selector.
h1{
color: blue;
}
span{
font-size: 20px;
}
Pada contoh kode css diatas, kita akan membuat tag h1 menjadi warna biru (semua tag h1), dan juga untuk tag span (semua tag span) akan menjadi ukuran 20px.
Class Selector
Class selector merupakan sebuah selector yang sering digunakan, karena selector class ini akan mencari seluruh tag yang memiliki atribut class dengan nilai yang sama atau sesuai.Dalam membuat class selector ini kita harus membuat tag html yang memiliki atribut class, contohnya.
<p class="text1">Ini adalah text paragraf</p>
<p class="text2 text3">Ini adalah text paragraf</p>
<h2 class="text4">Ini adalah h2</h2>
Coba lihat pada kode diatas, semua tag html kita telah mempunyai atribut class yang berbeda.Untuk sebuah nama class dapat memiliki lebih dari 1 tag html, dan dalam sebuah tag html dapat memiliki lebih dari 1 class.
Untuk contohnya, coba kita lihat pada tag "p" yang kedua, pada tag "p" tersebut kita memiliki atribut class yang bernama "text2 text3", itu artinya bahwa tag tersebut memiliki 2 class.Dan untuk contoh penulisan class selector tersebut bisa lihat di bawah.
.text1{
font-family: arial;
color: red;
}
.text2{
background-color: blue;
}
.text3{
font-size: 20px;
color:white;
}
.text4{
color: silver;
}
Dalam menggunakan class selector kita harus mengawali dengan tanda . sebelum nama class.Pada tutorial html kita sudah membahas tentang Mengenal ID dan Class pada html.
ID Selector
ID Selector juga hampir sama dengan class selector yaitu kedua selector ini sering di gunakan dan paling umum untuk digunakan.Jika pada class selector kita menggunakan atribut class pada tag html, sedangkan untuk id kita menggunakan atribut id pada tag html.Untuk menggunakan id selector ini kita harus memberikan nama yang unik, karena nama id tidak boleh sama tetapi harus beda.Artinya, id hanya bisa digunakan satu kali dalam sebuah halaman web, tidak boleh sama.
Contoh penggunaan id pada tag html.
<p id="aku">Ini adalah text paragraf</p>
<h2 id="kamu">Ini adalah h2</h2>
Contoh penggunaan id selector.
#aku{
font-family: arial;
}
#kamu{
font-size: 10px;
}
Untuk menulis id selector ini kita harus mengawali tanda # sebelum nama id.
Attribute Selector
Attribute ini tidak terlalu sering digunakan.Selector ini digunakan untuk mencari seluruh tag html yang memiliki attribute yang sudah di tuliskan.Contoh penulisan selector ini bisa lihat dibawah ini.
[type="text"]{
width: 200px;
height: 100px;
}
[type="submit"]{
width: 500px;
height: 200px;
}
Selector ini penulisannya harus berada pada tanda kurung siku "[" dan "]".Untuk [type="text"] akan cocok dengan tag yang memiliki attribute type dengan nilai text.
Sampai disini dulu tutorial kita mengenai css kali ini, semoga apa yang di berikan kepada anda bisa bermanfaat.
Terima kasih.
