Estimasi Waktu Baca: 3 menit
Daftar Isi

- Pemanasan โ˜•
- Definisi Selektor ๐Ÿ“„
- Selektor Universal ๐ŸŒŒ
- Selektor Tag โ›น
- Selektor Id โ›น๐Ÿปโ›นโ›น๐Ÿฟ
- Selektor Class โ›นโ›นโ›น
- Selektor Atribut โ›น๐Ÿ€
- Poin-Poin Penting โญ•
- Pendinginan ๐Ÿฆ

Artikel ini merupakan seri ke-4 dari Tutorial Dasar Belajar CSS. Untuk yang belum membaca artikel sebelumnya bisa kunjungi link berikut Menghubungkan Kode CSS dengan Dokumen HTML.

Pemanasan โ˜•

Pada awal materi CSS dasar kita hanya mengenal definisi dan sintaksnya serta sempat menyinggung beberapa macamnya.

Nah, pada pertemuan kali ini kita akan mulai membahas lebih dalam berbagai macam jenis dari selektor ini.

Semoga artikel ini mampu menjawab pertanyaan mengenai:

  • Apa itu selektor?
  • Apa saja macam selektor yang ada dalam CSS?
  • Apa perbedaan dari tiap jenis selektor?
  • Bagaimana penerapan tiap macam selektor?

Tanpa berlama lagi, mari kita mulai….

Definisi Selektor ๐Ÿ“„

Definisi selektor menurut MDN Webdoc Mozilla:

“CSS Selectors define the elements to which a set of CSS rules apply.

MDN Webdocs Mozilla

Selektor merupakan sebuah penanda berupa simbol dan kata kunci untuk memilih suatu elemen HTML yang akan diberikan aturan CSS nantinya.

Sintaks selektor pada CSS adalah sebagai berikut.


selector {
    /* Kode CSS */
}

Dalam CSS terdapat 5 jenis selektor dasar yang wajib diketahui, diantaranya adalah:

  • Selektor Universal
  • Selektor Tag
  • Selektor Id
  • Selektor Class
  • Selektor Atribut

Kelimanya akan kita bahas di bawah ini.

Selektor Universal ๐ŸŒŒ

Selektor universal merupakan selektor yang digunakan untuk memilih dan menyeleksi semua elemen pada suatu dokumen HTML.

Contoh kode:


* {
    border: 1px dashed black;
    color: pink;
}

Kode di atas akan membuat semua elemen HTML memiliki garis tepi patah-patah berwarna hitam dan warna teksnya akan berwarna merah muda.

Selektor universal umum didefinisikan di awal dokumen CSS untuk mereset CSS bawaan dari browser.

Karena browser satu dengan yang lain terkadang menerapkan style bawaan yang berbeda-beda untuk setiap elemen HTML-nya.

Dengan kata lain agar website yang kita buat formatnya sama ketika dibuka di berbagai browser maka perlu dilakukannya reset.

Reset yang umum diterapkan biasanya berhubungan dengan space yang dimiliki tiap elemen, yang pada pertemuan selanjutnya akan dikenal dengan sebutan padding dan margin.

Padding dan margin ini perlu direset ke nilai 0 agar tidak membuat kerancuan antar browser.

Untuk kodenya dapat dilihat di bawah ini.


*{
    padding: 0;
    margin: 0;
}

Kode di atas akan menghilangkan semua padding dan margin yang dimiliki setiap elemen.

Selektor Tag โ›น

Sesuai dengan namanya, selektor tag merupakan selektor yang memilih elemen berdasarkan nama tagnya. Selektor ini juga bisa disebut Type Selector.

Contoh:


h1{
    color: green;
}

Nama tag h1 mewakili semua elemen <h1> dalam dokumen HTML. Jadi kode di atas akan membuat teks pada seluruh elemen <h1> berwarna hijau.

Selektor Id โ›น๐Ÿปโ›นโ›น๐Ÿฟ

Selektor id merupakan selektor yang bersifat unik. Artinya, selektor id hanya boleh digunakan oleh satu elemen saja.

Selektor id dimulai dengan tanda pagar (#) dan diikuti dengan nama identitas elemen sesuka kita.


#first-header{
    background-color: black;
    color: pink;
}

Karena bersifat unik atau hanya mengizinkan satu elemen saja, maka ketika kita gunakan pada lebih dari satu elemen hasilnya adalah hanya elemen pertama saja yang akan diseleksi, elemen selanjutnya akan diabaikan.

Selektor Class โ›นโ›นโ›น

Selektor class hampir sama dengan selektor id, bedanya selektor ini tidak bersifat unik.

Selektor ini dimulai dengan tanda titik (.)


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

Karena tidak bersifat unik seperti selektor id, maka satu selektor class dapat digunakan berulang kali pada lebih dari satu elemen HTML.

Selain itu juga satu elemen HTML bisa menampung lebih dari satu selektor class.

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>

Selektor Atribut โ›น๐Ÿ€

Terakhir, selektor atribut merupakan selektor yang memilih elemen berdasarkan tag dan atributnya. Jadi selektor ini hampir sama dengan selektor tag hanya saja atribut dari tag yang dipilih ikut didefinisikan.

Dokumen CSS


a[title] {
    background-color: black;
    color: pink;
    padding: 5px;
    text-decoration: none;
    border-radius: 5px;
}

Dokumen HTML


<a title="Link Download" href="#">Download</a>

Poin-Poin Penting โญ•

Setelah mempelajari materi selektor dasar secara singkat, kita dapat mengambil beberapa poin penting sebagai berikut:

  • Selektor adalah penanda berupa keyword dan simbol.
  • Selektor digunakan untuk memilih suatu elemen HTML yang nantinya akan diterapkan CSS padanya.
  • Terdapat 5 selektor dasar yaitu selektor universal, tag, id, class, dan atribut.
  • Selektor universal, memilih semua elemen pada suatu dokumen HTML.
  • Selektor tag, memilih elemen berdasarkan nama tagnya.
  • Selektor id, memilih elemen berdasarkan nama identitasnya.
  • Selektor class, memilih elemen berdasarkan nama classnya.
  • Selektor atribut, memilih elemen berdasarkan nama tag beserta atributnya.

Pendinginan ๐Ÿฆ

Pada artikel kali ini kita sudah mempelajari beberapa hal diantaranya:

  • Definisi selektor โœ…
  • 5 macam selektor dasar โœ…
  • Perbedaan tiap selektor dasar beserta penerapannya โœ…

Selanjutnya kita akan mulai belajar mengenai Warna di CSS. Sampai jumpa di artikel selanjutnya. ๐Ÿ™‹