Mengenal Selector Pada CSS dan Penggunaan Simple Selector Pada CSS
Seperti yang telah diuraikan sebelumnya bahwa CSS adalah kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, dimana bahasa markup ini salah satunya adalah HTML. Begitu juga dengan fungsi CSS yaitu untuk mengubah/memformat tampilan dari tag HTML. Maka terdapat aturan-aturan dalam kode CSS supaya dapat dihubungkan dengan tag HTML.
Pada tutorial kali ini, kita akan belajar tentang bagaimana cara untuk menghubungakan Kode CSS dengan tag HTML sehingga CSS dapat memformat Tag HTML yang sesuai. Untuk itu pada CSS dikenal ada yang namanya Selector.
Pengertian Selector pada CSS
Selector adalah tag HTML di mana gaya akan diterapkan. Selektor CSS digunakan untuk “menemukan” (atau memilih) elemen HTML yang mana yang akan diformat/diubah formatnya. Selector dapat berupa tag HTML seperti <h1> atau <table> dll.
Secara umum selector dibagi menjadi 5 kategori berikut ini:
- Simple Selectors
- Combinator Selectors
- Pseudo-class Selectors
- Pseudo-elements Selectors
- Attribute Selectors
Penggunaan Simple Selectors
Simple Selector pada CSS digunakan untuk memilih elemen HTML yang akan diformat berdasarkan dari name, id atau class. Sehingga format yang diberikan apda kode CSS akan diterapkan pada setiap tag HTML sesuai dengna nama elemen, nama id dan nama class-nya.
Contoh pemilihan Elemen HTML berdasarkan nama elemen:
1 2 3 4 |
p{ text-align: justify; font-size:0.8em; } |
Kode CSS di atas akan memberikan format pada elemen <p> dengan format perataan paragraf justify dan ukuran huruf 0.8em. Tentang Ukuran em, silahkan baca: Satuan Ukuran Yang Digunakan Pada CSS (CSS Measurement Units).
Dari kode CSS tersebut maka paragraf yang ada pada halaman html akan ditampilkan seperti pada gamber berikut ini.

Hasil Selector Paragraf <p>
Contoh pemilihan Elemen HTML berdasarkan nama ID:
1 2 3 4 |
#judul{ text-transform: uppercase; color: blue; } |
Kode CSS di atas akan memberikan format terhadap elemen HTML yang memiliki nama id “judul” dengan format teks UPPERCASE atau huruf kapital dan berwarna biru.
Contoh tag HTML berikut:
1 |
<h1 id="judul">Judul Dengan ID</h1> |
Maka tag HTML <h1> akan menghasilkan tampilan seperti berikut ini.
Hasil Selector ID CSS
Contoh pemilihan berdasarkan nama CLASS:
1 2 3 |
.hijau{ color: green; } |
Kode CSS di atas akan memformat tag HTML yang memiliki nama class “hijau”, sehingga kode HTML berikut ini:
1 2 3 4 |
<p class="hijau">Panglima TNI Marsekal Hadi Tjahjanto mengatakan pihaknya telah menerbangkan pesawat Hercules ke Shanghai, China, untuk mengangkut peralatan dan obat untuk membantu kesembuhan pasien virus Corona (COVID-19). Pesawat itu berkapasitas 9 ton.</p> |
Akan menghasilkan tampilan seperti berikut ini:

Hasil Selector Class
Demikian tutorial Mengenal Selector Pada CSS dan Penggunaan Simple Selector CSS. Untuk penggunaan jenis selector lainnya insyaAllah akan kita bahas pada tutorial selanjutnya.