Skip to main content

B.3. Selector

Selector pada CSS merupakan part pertama dari aturan penulisan CSS. Selector adalah pola di dalam CSS yang akan memberitahu web browser, bahwasannya elemen mana yang akan dipilih (selected) dan memiliki properti CSS yang diterapkan didalamnya.

Terdapat beberapa jenis selector diantaranya:

  • Type Selector
  • Class Selector
  • ID Selector
  • Attribute Selector

Mungkin pada chapter B.2. Metode Penulisan CSS kita sudah menggunakan salah satunya, tetapi pada chapter ini kita akan membahas lebih detail lagi satu-persatu ya🙌.

B.3.1. Type Selector​

Type selector adalah salah satu pola untuk menyeleksi elemen di dalam HTML. Cara menggunakan type selector adalah dengan cara menyebutkan nama elemen targetnya secara langsung.

Contoh nya seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.3.1. Type Selector</title>
    <!-- Connected into css file -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello</h1>
    <h2>World</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, cum
      dolor!
    </p>
  </body>
</html>

Pada kode diatas kita mempunyai 3 elemen HTML dan kita ingin merubah warnanya, jika menggunakan type selector kita bisa langsung menyebutkan nama elemen nya secara langsung. Maka hasilnya di web browser akan tampil seperti:

Output

Mudah ya temen-temen. Tetapi perlu diperhatikan, menggunakan type selector akan menerapkan style nya secara menyeluruh ke elemen yang di pilih. Contohnya coba kita tambahkan sebuah tulisan lain dengan menggunakan tag <h1>:

<h1>H1 yang lain</h1>

Elemen baru yang dibuat diatas akan otomatis berwarna hijau karena kita menggunakan type selector yang akan menerapkan style yang sama pada elemen yang dipilih.

Output

Penggunaan selector ini sangat cocok ketika temen-temen ingin menerapkan style secara menyeluruh sekaligus kedalam suatu elemen HTML yang temen-temen tulis, tetapi tidak di anjurkan ketika temen-temen ingin menerapkan style yang berbeda-beda pada setiap komponennya.

B.3.2. Class Selector​

Berbeda dengan type selector, class selector akan menyeleksi elemen dengan lebih spesifik berdasarkan nilai di dalam attribut class yang dimiliki oleh suatu elemen. Sebagai contoh coba perhatikan kode berikut: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.3.2. Class Selector</title>

    <!-- Connected into css file -->
    <link rel="stylesheet" href="style_2.css" />
  </head>

  <body>
    <h1 class="has-green-color">Hello</h1>
    <h1>H1 yang lain</h1>
  </body>
</html>

Kode CSS di atas akan membuat elemen yang memiliki class has-green-color akan berwarna hijau. Sedangkan yang tidak akan tetap berwarna hitam.

Output

Ini lebih cocok digunakan ketika temen-temen ingin menerapkan style yang lebih spesifik ke elemen yang memiliki kelas tertentu saja. Penulis lebih suka menggunakan class selector untuk membuat sebuah blueprint style atau cetakan style untuk sebuah komponen/elemen di dalam web.

Apa itu? coba perhatikan kode ini:

.default-button-style {
  padding: 1rem 3rem;
  border-radius: 12px;
  border: none;
  font-size: 1.5rem;
}

.backround-blue {
  background-color: blue;
  color: white;
}

.backround-brown {
  background-color: brown;
  color: white;
}

Kita punya 3 cetakan style yaitu untuk memberikan sebuah style bawaan pada elemen <button> dan dua cetakan untuk mengubah warna tombolnya. Cetakan diatas bisa kita terapkan kedalam kode:

<!-- Blueprint style example usage -->
<button class="default-button-style backround-blue">Blue</button>
<button class="default-button-style backround-brown">Brown</button>

Maka hasilnya akan terlihat seperti:

Output

Ketika kita ingin membuat tombol ketiga dengan warna biru, maka kita bisa menggunakan cetakan default-button-style backround-blue pada tombol yang baru: 

<button class="default-button-style backround-blue">Other Blue</button>

Maka hasilnya akan seperti:

Output

Keuntungan dari menerapkan teknik diatas adalah kita tidak perlu menulis ulang kode yang sama berulang kali ya temen-temen, artinya style yang kita gunakan menjadi reusable atau dapat digunakan kembali pada sebuah komponen tanpa mendefinisikan style nya kembali.

B.3.3. ID Selector​

Nah, setelah temen-temen memahami tentang class selector, sekarang saatnya kita bahas tentang ID selector. Kalau class selector itu bisa dipakai berkali-kali di berbagai elemen, ID selector beda ceritanya. ID selector ini spesial banget karena dia hanya bisa digunakan sekali untuk satu elemen di satu halaman. Jadi, kalau temen-temen pengen menargetkan elemen yang benar-benar unik, ID selector adalah pilihan yang tepat.

Sama seperti class selector, tapi dengan sedikit perbedaan. ID selector diawali dengan tanda #, diikuti oleh nama ID yang udah temen-temen kasih ke elemen HTML-nya. Untuk lebih jelasnya coba temen-temen perhatikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.3.3. ID Selector</title>

    <!-- Connected into css file -->
    <link rel="stylesheet" href="style_3.css" />
  </head>

  <body>
    <h1 id="header">Example Header Element</h1>
  </body>
</html>

Nah, di pada kode di atas, #header akan menargetkan elemen yang punya id="header". Jadi, semua style yang kita terapkan, seperti warna latar belakang, warna teks, dan perataan teks, bakal diterapikan ke elemen yang memiliki ID header.

Output

Ada beberapa aspek yang perlu diperhatikan ketika temen-temen menggunakan ID Selector diantaranya:

  • Unik: Setiap ID itu harus unik di satu halaman. Artinya, cuma satu elemen aja yang boleh pake ID tertentu di setiap halaman.
  • Cuma Satu ID per Elemen: Sebuah elemen HTML cuma boleh punya satu ID. Beda sama class yang bisa dipake di banyak elemen, ID ini lebih eksklusif.

jika temen-temen ingin menerapkan suatu style yang unik kedalam seuatu elemen, maka bisa menggunakan ID Selector.

B.3.4. Attribute Selector​

Sekarang kita akan bahas mengenai attribut selector, atttribut selector memungkinkan temen-temen untuk menargetkan elemen-elemen yang punya atribut spesifik atau nilai atribut tertentu. Misalnya, kalau temen-temen mau menargetkan semua elemen <a> yang punya atribut href, atau semua input yang bertipe text, Attribute Selector ini yang dipake.

Sebagai contoh coba temen-temen perhatikan kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>B.3.4. Attribut Selector</title>

    <!-- Connected into css file -->
    <link rel="stylesheet" href="style_4.css" />
  </head>

  <body>
    <a href="#">Follow My Intagram</a>
    <br />
    <a href="#" name="github">Connect With Me On GitHub</a>
  </body>
</html>

Pada kode di atas kita memiliki dua buah tag <a> yang keduanya sama memiliki attribut bawaan dari tag itu sendiri yaitu href. Dan ada juga yang memiliki attribut yang kita definisikan sendiri yaitu name="github", dan pada kode CSS kita menggunakan attribut selector yang akan menyeleksi tag <a> yang mempunyai attribut name="github" dan diterapkan styling untuk menghilangkan text-decoration dan warnanya.

Jika temen-temen lihat hasilnya di web browser maka akan terlihat seperti:

Output

Attribute Selector ini super berguna jika temen-temen perlu mengatxur elemen-elemen yang punya atribut tertentu. Misalnya, kalau temen-temen mau bikin semua link eksternal punya ikon kecil di sebelahnya, atau kalau mau bedain gaya buat berbagai tipe input di formulir.

Namun, hati-hati ya temen-temen, jangan terlalu sering memakai Attribute Selector yang kompleks kalau tidak dibutuhkan, karena bisa bikin CSS jadi sedikit lebih lambat jika diproses.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.3-selector