Sebelumnya kita sudah membahas cara memasukkan CSS ke HTML. Sekarang kita akan bahas macam-macam selector CSS. Berikut pembahasan AneIqbal selengkapnya.
Jenis-jenis selector yang ada di CSS
Ada berbagai jenis selector yang ada di CSS, tapi ke-5 jenis selector inilah yang selalu akan kita temui dalam proses pembuatan halaman web.
..ada jenis selector lain yang lebih dalam menjangkau elemen HTML untuk diubah tampilannya. Ini kita akan bahas di posting yang akan datang.
Ini dia ke-5 jenis selector dasar CSS.
Universal selector
Universal selector berguna untuk mengubah seluruh elemen HTML yang ada. Selector ini menggunakan tanda bintang (*) dan bukan tag HTML.
..oleh sebab itu, selector ini akan mengubah secara global halaman web.
Kita coba praktikkan.
Ini kode CSSnya, kita simpan dengan nama file universal-selector.css:
* {
font-size: 14px;
color: green;
}
Ini kode HTMLnya, kita simpan dengan nama file universal-selector.html:
Keduanya ada di dalam 1 folder.
Artinya, semua font yang ada di halaman web akan diubah ukurannya menjadi 14 pixel dan berwarna hijau, nggak peduli itu tagnya apa, semua tag akan sama. Seperti ini jadinya:
Elemen type selector
Elemen type selector ini menggunakan tag HTML untuk mengubah tampilannya. Setiap tag HTML bisa digunakan sebagai selector dan perubahannya akan berlaku ke semua tag yang sama di 1 file HTML.
..jadi jika ada 3 paragraf yang warna teksnya ingin diubah menjadi biru, cukup dengan 1 selector p saja.
Kita praktikkan.
Buat file element-type-selector.html.
Lalu, ini file CSSnya: element-stype-selector.css.
p {
color: blue;
}
Semua paragraf: paragraf 1, 2, dan 3 akan menjadi biru warna hurufnya.
Class selector
Selector jenis ini merupakan yang paling sering digunakan. Selector ini menggunakan tanda titik (.) dan nama dari atribut class di suatu tag HTML. Posisi tanda titik tersebut berada di depan nama atribut classnya.
..jadi apapun tagnya, asal memiliki atribut class yang sama, perubahannya akan sama.
Contohnya, kita akan mengubah warna teks heading dan paragraf menjadi merah.
Buat file class-selector.html.
Lalu, buat file class-selector.css.
.merah {
color: red;
}
Karena tag <h1> dan <p> punya nama class yang sama, maka akan sama hasilnya.
Yang perlu diingat, nama class boleh digunakan di lebih dari 1 tag HTML. Contohnya seperti di atas, tag <h1> dan <p> memiliki nama class yang sama.
..dan 1 tag HTML bisa memiliki lebih dari 1 nama class. Seperti ini:
<h2 class="merah mobil kebab">Ini heading</h2>
Artinya, ada 3 class pada tag <h2> di atas: merah, mobil, dan kebab.
ID selector
ID selector ini hampir sama dengan class selector, bedanya. Selector ini menggunakan tanda pagar (#) dan nama dari atribut id di suatu tag HTML. Posisi tanda pagar tersebut berada di depan nama atribut idnya.
Atribut id pada tag HTML nggak boleh dipakai lebih dari 1 kali di 1 file HTML, karena selain berperan sebagai selector di CSS, atribut id juga digunakan oleh kode Javascript.
..jadi harus bersifat unik dan nggak boleh sama.
Contoh kodenya seperti ini.
Kode HTML:
#warna_biru {
color: blue;
}
#warna_merah {
color: red;
}
#garis_bawah {
text-decoration: underline;
}
Seperti itu.
Yang perlu diingat, dalam 1 file HTML nggak boleh ada nama id yang sama. dan setiap tag HTML boleh punya lebih dari 1 id.
Atribute selector
Kalo selector yang ini, dia menggunakan atribute dari suatu tag HTML. misalnya atribut href yang ada pada tag <a>.
Seperti ini kode CSSnya:
[href] {
color: green;
text-decoration: underline;
}
Atributenya ditambahkan tanda kurung siku ([…]) seperti contoh kode di atas.
Kita juga bisa lebih spesifik lagi dalam menjangkau atributenya, yakni dengan valuenya juga.
Seperti ini:
[type="text"] {
font-size: 20px;
}
Artinya, ukuran font diubah menjadi 20px untuk atribute type dengan value text pada tag <input>, yang mana ini adalah inputan teks dalam pembuatan form.
Sampai sini selesai sudah pembahasan kita mengenai macam macam selector yang ada di CSS.
Next, kita akan bahas cara penggunaan selector CSS.
