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
- Referensi

Pemanasan

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

selector {
    /* style yang akan diberikan */
}

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 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 (. )

.btn-primary{
    background-color: lightblue;
    color: white;
}

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 */
}

Pendinginan

Pada artikel ini kita telah mempelajari beberapa hal seperti apa itu pemilih dan seperti apa itu

Apa itu pemilih CSS dan contohnya?

Apa itu pemilih CSS dan bagaimana cara kerjanya?

Selektor apa yang dapat digunakan dalam CSS?

Bagaimana Anda mengelompokkan pemilih dalam CSS?