Artikel ini adalah artikel #04 dari seri Tutorial CSS Dasar untuk Pemula. Jika Anda sudah memahami topik dalam artikel ini, yaitu tentang 5 jenis penyeleksi di CSS. Silahkan langsung saja skip dan lanjut ke materi selanjutnya Belajar Color Properties di CSS
Daftar Isi - Pemanasan - Apa itu Selector? - 5 Macam Selector di CSS - Universal Selector - Tag Selector - Id Selector - Class Selector - Atribut Selector - Pendinginan - ReferensiPemanasan
Nah, halo. Pada artikel pertama di seri Tutorial CSS Dasar, kita sudah menyentuh sedikit tentang pemilih, kemudian juga di artikel Sintaks CSS Dasar
Jadi apa sebenarnya pemilih itu?
Baiklah, tanpa membuang banyak waktu lagi, silakan baca materi di bawah ini
Apa itu Pemilih?
Definisi pemilih menurut MDN Webdoc Mozilla
"Pemilih CSS menentukan elemen yang menerapkan seperangkat aturan CSS. “
Webdocs MDN Mozilla
Selector adalah penanda berupa kata kunci, tag html, atau simbol untuk memilih elemen HTML yang nantinya akan kita beri aturan CSS
Jadi itu adalah representasi dari elemen HTML yang nantinya akan kita tentukan gayanya
Sintaks pemilih pada CSS adalah sebagai berikut
5 Jenis Selector di CSS
Di dalam CSS ada 5 jenis basic selector yang harus kita ketahui yaitu
- Pemilih Universal
- Pemilih Tag
- Pemilih Id
- Pemilih Kelas
- Atribut pemilih
Kelimanya akan kita bahas di bawah ini
Pemilih Universal
Selektor universal adalah selektor yang sering digunakan programmer untuk memilih dan memilih semua elemen dalam dokumen HTML
Contoh kode
* { border: 1px dashed black; color: pink; }Kode di atas akan membuat semua elemen HTML memiliki batas pecah berwarna hitam dan warna teks menjadi merah muda
Pemrogram umumnya menggunakan pemilih universal di awal penulisan dokumen CSS untuk mengatur ulang gaya default dari browser
Karena browser yang berbeda terkadang menerapkan gaya default yang berbeda untuk setiap elemen HTML. Ini umumnya mengacu pada margin dan padding
Apa itu margin dan padding?
Dengan kata lain agar website yang kita buat memiliki format yang sama ketika dibuka di berbagai browser maka perlu dilakukan reset
Untuk kodenya ada di bawah ini
*{ padding: 0; margin: 0; }Kode di atas akan menghapus semua padding dan margin yang dimiliki setiap elemen HTML di berbagai browser
Pemilih Tag
Seperti namanya, pemilih tag adalah pemilih yang memilih elemen berdasarkan nama tagnya. Pemilih ini juga bisa disebut Pemilih Jenis
Contoh
h1{ color: green; } _Nama tag h1 mewakili semua elemen
dalam dokumen HTML. Jadi kode di atas akan membuat teks pada seluruh elemen berwarna hijau.Pemilih Id
Pemilih Id
Pemilih id adalah pemilih unik. Artinya, pemilih id hanya dapat digunakan untuk satu elemen
Untuk membuat pemilih id, kita harus memulainya dengan tanda pagar (#)
#first-header{ background-color: black; color: pink; }Karena unik atau hanya mengizinkan satu elemen, maka ketika kita menggunakannya pada lebih dari satu elemen, hasilnya hanya elemen pertama yang akan dipilih dan mengabaikan elemen berikutnya.
Pemilih Kelas
Selektor kelas hampir sama dengan selektor id, bedanya selektor ini tidak unik dan untuk membuatnya kita membutuhkan tanda titik (. )
Karena tidak unik seperti id selector, kita bisa menggunakan satu class selector secara berulang pada lebih dari satu elemen HTML
Selain itu, satu elemen HTML dapat menampung lebih dari satu pemilih kelas
dokumen CSS
.btn{ padding: 5px; margin: 5px; } .btn-primary{ background-color: lightblue; color: white; }dokumen HTML
<button type="button" class="btn-primary">Download</button> <button type="button" class="btn btn-primary">Upload</button> _Atribut pemilih
Terakhir, pemilih atribut adalah pemilih yang memilih elemen berdasarkan tag dan atributnya. Jadi pemilih ini hampir sama dengan pemilih tag, hanya atribut dari tag yang dipilih juga ditentukan
dokumen CSS
a[title] { background-color: black; color: pink; padding: 5px; text-decoration: none; border-radius: 5px; } _dokumen HTML
selector { /* style yang akan diberikan */ } _0Pendinginan
Pada artikel ini kita telah mempelajari beberapa hal seperti apa itu pemilih dan seperti apa itu