Sebelumnya kita sudah belajar mengenal CSS dan Cara Menggunakan CSS. Selanjutnya, kita perlu memahami “selektor” dalam CSS. Dalam tutorial ini, kita akan mempelajari berbagai jenis selektor CSS, termasuk selektor elemen, selektor kelas dan ID, selektor keturunan, serta pseudo-class dan pseudo-element. Selain itu kita juga perlu memahami bagaimana kita bisa memilih elemen yang tepat dalam CSS!
Selektor CSS adalah mekanisme yang digunakan dalam Cascading Style Sheets (CSS) untuk memilih elemen atau sekelompok elemen tertentu pada halaman web yang ingin diberikan gaya atau tampilan tertentu. Selektor ini memberi tahu browser elemen mana yang harus diterapkan gaya CSS. Dengan menggunakan selektor, Anda dapat mengendalikan tampilan, warna, font, ukuran, posisi, dan berbagai aspek lain dari elemen-elemen dalam halaman web Anda. Selektor dalam CSS bekerja dengan mencocokkan pola antara selektor yang didefinisikan dalam gaya CSS dengan elemen-elemen dalam markup HTML. Setiap elemen dalam HTML dapat diidentifikasi oleh nama elemennya, atributnya, atau posisinya dalam hierarki dokumen.
Berikut ini adalah penjelasan dari beberapa Selektor CSS:
1. Selektor Elemen (Element Selector)
Selektor elemen adalah selektor CSS yang paling sederhana. Anda hanya perlu menentukan nama elemen html yang ingin Anda format atau ingin anda berikan style atau gaya. Misalnya:
1 2 3 | p { color: blue; } |
Dalam contoh ini, semua elemen <p> (paragraf) akan memiliki warna teks biru. Sehingga setiap ada elemen <p> pada dokumen htmlnya, maka akan diformat dengan warna font biru.
2. Selektor Kelas dan ID (Class & ID)
Kelas (class) dan ID memberikan Anda kontrol yang lebih spesifik dalam memilih elemen. Kelas atau class ditandai dengan awalan titik (.), sementara ID ditandai dengan tanda pagar (#). Contohnya:
1 2 3 4 5 6 7 | .teks-merah { color: red; } #judul { font-size: 24px; } |
Dalam contoh di atas, elemen dengan kelas atau class “.teks-merah” akan memiliki teks berwarna merah, sementara elemen dengan ID “#judul” akan memiliki ukuran font 24px.
3. Selektor Keturunan (Descendant Selector)
Selektor keturunan memungkinkan Anda memilih elemen yang ada dalam hierarki tertentu. Misalnya, jika Anda ingin memilih semua elemen <li> yang berada dalam elemen <ul>, Anda bisa menggunakan:
1 2 3 | ul li { list-style-type: square; } |
Dalam contoh ini, semua elemen <li> dalam elemen <ul> akan memiliki tanda kotak.
4. Selektor Anak (Child Selector)
Child Selector adalah konsep dalam CSS yang memungkinkan Anda untuk memilih elemen anak yang berada langsung di bawah elemen induk tertentu. Ini berarti hanya elemen yang merupakan anak langsung dari elemen tertentu yang akan dipilih, dan tidak memperhatikan elemen anak-anak yang lebih dalam dalam hierarki.
Child Selector digunakan dengan menggunakan tanda panah (>) di antara elemen induk dan elemen anak yang ingin Anda pilih.
Contohnya:
1 2 3 | .parent > p { color: blue; } |
Dalam contoh ini, hanya elemen <p> yang langsung berada di bawah <parent> yang berwarna biru.
5. Pseudo-class dan Pseudo-element
Pseudo-class adalah selector yang menargetkan kondisi tertentu. Misalnya, :hover memilih elemen ketika kursor melayang di atasnya. Contohnya:
1 2 3 | a:hover { color: orange; } |
Dalam contoh ini, tautan akan berubah menjadi orange saat kursor melayang di atasnya.
Pseudo-element memungkinkan Anda memilih bagian spesifik dari elemen, seperti ::before dan ::after untuk menambahkan konten sebelum dan sesudah elemen. Contohnya:
1 2 3 | p::before { content: "➡ "; } |
Dalam contoh ini, setiap elemen <p> akan memiliki tanda panah ke kanan di bagian awal.
Contoh Penerapan Selektor CSS:
Untuk mempraktekkan Selektor CSS, silahkan buat file dengna nama latihan_css_002.html dan isikan kode html berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <title>Contoh Penggunaan Selector CSS</title> <link rel="stylesheet" type="text/css" href="assets/css/style_selector.css"> </head> <body> <h1 class="judul">Ini adalah judul (Selektor Kelas)</h1> <p>Ini adalah paragraf pertama.</p> <p class="teks-merah">Ini adalah paragraf kedua (Selektor Kelas)</p> <div> <p>Ini adalah paragraf dalam div.</p> </div> <p class="teks-khusus" id="paragraf-khusus">Ini adalah paragraf khusus (Selektor Kelas dan ID)</p> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <a href="#" class="tautan">Ini adalah tautan (Selektor Kelas)</a> </body> </html> |
Selanjutnya pada folder web anda, buat folder dengan nama assets, kemudian dalam folder assets silahkan dibuat lagi folder css, lalu didalamnya buat file dengan nama style_selector.css dan ketikkan kode css berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /* Selector Elemen */ p { color: blue; } /* Selektor Kelas */ .teks-merah { color: red; } .tautan { text-decoration: none; color: purple; } /* Selektor Kelas dan ID */ #paragraf-khusus.teks-khusus { font-weight: bold; } /* Pseudo-class */ a:hover { color: orange; } /* Pseudo-element */ p::before { content: "➡ "; } |
Jika file latihan_css_002.html kita jalankan pada web browser, maka hasilnya terlihat seperti gambar berikut ini:
Kesimpulan
Dalam tutorial ini, kita telah membahas berbagai jenis selektor CSS yang dapat Anda gunakan untuk mengontrol tampilan dan gaya elemen dalam halaman web. Selektor elemen memungkinkan Anda memilih semua elemen tertentu, sedangkan kelas dan ID memberikan kontrol lebih spesifik. Selektor keturunan memungkinkan Anda memilih elemen dalam hierarki, sementara pseudo-class dan pseudo-element membantu Anda menggabungkan interaksi dan konten tambahan.
Dengan pemahaman tentang berbagai jenis selektor ini, Anda akan lebih siap untuk membuat tampilan yang kreatif dan menarik dalam halaman web Anda. Jangan ragu untuk mencoba kombinasi selektor yang berbeda untuk mencapai efek yang diinginkan.
Untuk mendapatkan daftar Tutorial CSS dari Dasar, silahkan mengunjungi Index Tutorial CSS dari Dasar: Belajar CSS Dari Dasar.