author Ahmad Muhardian

Tutorial CSS: Memahami 6 Jenis Selektor di CSS


Tutorial CSS: Selector dalam CSS

Setelah memahami struktur dasar CSS dan cara menulis CSS di HTML, berikutnya kita akan pelajari lebih dalam tentang selektor.

Hal dasar yang harus kita ketahui setelah memahami cara menulis HTML di CSS adalah selektor.

Selektor adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML.

Ada 6 macam selektor di CSS:

  1. Selektor Tag
  2. Selektor Class
  3. Selektor ID
  4. Selektor Atribut
  5. Selektor Universal
  6. Selektor Pseudo

1. Selektor Tag

Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag.

Contoh:

p {
    color: blue;
}

Artinya: Pilih semua elemen <p> lalu atur warna teksnya menjadi biru.

Kalau misalnya kita punya struktur HTML seperti ini:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka akan menghasilkan output seperti ini:

Semua elemen <p> berwarna biru, sedangkan elemen <div> tidak.

2. Selektor Class

Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya.

Contoh:

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Kita memiliki selektor class beranam .pink. Nah cara menggunakan selektor ini di HTML adalah dengan menambahkan atribut class di dalamnya.

Contoh:

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

Hasilnya:

Selektor class dapat kita gunakan pada elemen yang kita inginkan.

Sebuah elemen HTML dapat menggunakan satu atau lebih class.

Contoh:

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

Lalu di HTML kita gunakan kedua class tersebut pada satu elemen:

<h2 class="text-white bg-teal">Tutorial CSS untuk Pemula</h2>

Hasilnya:

3. Selektor ID

Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.

Selektor ID ditandai dengan tanda pagar (#) di depannya.

Contoh:

#header {
    background: teal;
    color: white;
    height: 100px;
    padding: 50px;
}

Lalu pada kode HTML:

<header id="header">
    <h1>Selamat Datang di Website Saya</h1>
</header>

Hasilnya:

4. Selektor Atribut

Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag.

Contoh selektor Atribut:

input[type=text] {
    background: none;
    color: cyan;
    padding: 10px;
    border: 1px solid cyan;
}

Artinya kita akan memilih semua elemen <input> yang memiliki atribut type='text'.

Contoh kode HTML:

<input type="text" placeholder="ketik sesuatu..." />

Hasilnya:

5. Selektor Universal

Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada jangkaua (scope) tertentu.

Contoh:

* {
    border: 1px solid grey;
}

Artinya semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey.

Hasilnya:

Selektor universal bisanya digunakan untuk me-reset CSS.

Kenapa harus di-reset?

Pada halaman HTML, ada beberapa CSS bawaan browser seperti padding dan margin pada elemen tertentu.

Reset bertujuan untuk menghilangkan padding dan margin tersebut.

Contoh CSS reset:

* {
    padding: 0;
    margin: 0;
}

Maka semua elemen tidak akan memiliki padding dan margin.

6. Pseudo Selektor

Pseudo selektor adalah selektor untuk memilih elemen semu seperti state pada elemen, elemen before dan after, elemen ganjil, dan sebagainya.

Ada dua macam pseudo selektor:

  1. pseudo-class selektor untuk state elemen;
  2. pseudo-element selektor untuk elemen semu di HTML.

Mari kita bahas satu per satu..

1. Pseudo-class

Pseudo-class adalah selektor untuk memilih state pada elemen.

Contohnya seperti elemen saat diklik, saat fokus, saat disentuh, dan lain sebagainya.

Nah, dengan selektor ini kita bisa menentukan tampilan dari elemen pada state tersebut.

Format penulisan pseduo-class menggunakan titik dua setelah elemen.

selektor:psudo-class {
  /* definisi properti di sini*/
}

Contoh:

a:hover {
  color: green;
}
Contoh Kode lengkap
<html>
  <head>
    <title>Selector Pseudo Class</title>
    <style>
        a:hover {
            color: green;
        }
    </style>
  </head>
  <body>
    <a href="#">Link to Petani Kode</a>
  </body>
</html>

Artinya:

Kita akan memberikan warna hijau pada elemen <a> saat dia di-hover atau disentuh pointer.

Maka hasilnya:

Selain :hover ada beberapa selektor pseudo-class lainnya:

  • :link untuk memlih link yang belum dikunjungi;
  • :visited untuk memlih link yang sudah dikunjungi;
  • :active untuk memilih elemen yang sedang aktif, seperti saat diklik;
  • :focus untuk memlih elemen yang sedang dalam keadaan fokus, misal teks lagi diinput.
  • :checked untuk memilih elemen yang dicentang pada checkbox.

Masih banyak lagi, list lengkapnya bisa kamu cek di MDN Doc.

2. Pseudo-element

Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini adalah elemen yang seolah-olah kita tambahkan di HTML.

Hmm.. bingung ya 🤔.

Oke kalau begitu kita pakai contoh.

Misalnya kita punya elemen paragraf seperti ini:

<p>ini adalah paragraf yang cukup panjang. Sengaja dibuat panjang agar bisa
  dipakai sebagai contoh untuk selektor pseudo-elemen. Pseudo-element adalah 
  selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini 
  adalah elemen yang seolah-olah kita tambahkan di HTML.
</p>

Lalu kita ingin memberikan style hanya pada baris pertama saja.

Gimana caranya?

Tanpa pseudo-element, kita bisa tambahkan elemen <span> di baris pertama menjadi seperti ini.

<p><span>ini adalah paragraf yang cukup panjang.</span>
  Sengaja dibuat panjang agar bisa dipakai sebagai contoh untuk selektor pseudo-elemen. 
  Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini 
  adalah elemen yang seolah-olah kita tambahkan di HTML.
</p>

Kemudian memilih elemen span tersebut di CSS seperti ini:

p span {
  color: magenta;
}

Cara ini sebenarnya tidak disarankan, karena kita harus membuat elemen baru di dalam paragraf. Belum lagi, jika paragrafnya cukup panjang baris pertama akan tambah panjang pula.

Maka di sinilah kita bisa pakai selektor pseudo-element ::first-line.

Sehingga tanpa menambahkan elemen <span>, kode CSS-nya akan menjadi seperti ini.

p::first-line {
  color: magenta;
}
Kode lengkapnya
<html>
  <head>
    <title>Contoh Pseudo-element</title>
    <meta content="">
    <style>
    p::first-line {
        color: magenta;
    }
    </style>
  </head>
  <body>
    <p>ini adalah paragraf yang cukup panjang. Sengaja dibuat panjang agar bisa
  dipakai sebagai contoh untuk selektor pseudo-elemen. Pseudo-element adalah 
  selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini 
  adalah elemen yang seolah-olah kita tambahkan di HTML.
</p>
  </body>
</html>

Maka hasilnya:

Contoh pseudo-element

Bedanya dengan pseudo-class apa?

Selektor pseudo-element menggunakan tanda titik dua ganda (::) sedangkan pseudo-class pakai satu titik dua (:).

Berikut ini beberapa contoh selektor pseudo-element:

  • ::before untuk memilh elemen semu sebelum elemen;
  • ::after untuk memilh elemen semu setelah elemen;
  • ::marker untuk memilh marker pada list;
  • ::placeholder untuk memilih teks placeholder pada elemen input teks;

List lengkap pseudo-element bisa kamu cek di MDN Doc.

Apa Selanjutnya?

Kita mempelajari 6 jenis selektor di CSS.

Berikutnya kita tinggal pelajari properti-properti untuk melakukan styling di CSS.

Silahkan lanjutkan ke:

Selamat belajar. 🙌

Daftar isi tutorial

  1. Tutorial CSS #01: Pengenalan Dasar CSS untuk Pemula
  2. Tutorial CSS #02: Cara Menulis CSS di HTML
  3. Tutorial CSS #03: Sintaks Dasar CSS yang Harus Kamu Pahami
  4. Tutorial CSS #04: Memahami Selector di CSS
  5. Tutorial CSS #05: Menggunakan Warna di CSS
  6. Tutorial CSS #06: Menggunakan Background di CSS
  7. Tutorial CSS #07: Text Formatting di CSS
  8. Tutorial CSS #08: Menggunakan Font di CSS
  9. Tutorial CSS #09: Menggunakan Garis di CSS (Border)
  10. Tutorial CSS #10: Menentukan ukuran elemen
  11. Tutorial CSS #11: Box Model di CSS (Coming soon)
  12. Tutorial CSS #12: Position (Coming soon)
  13. Tutorial CSS #13: Menggunakan Float (Coming soon)
  14. Tutorial CSS3 #xx: Cara Menggunakan Bayangan (Shadow)
  15. 🚧 Work in Progress 🚧

    Maaf jika ada link yang belum aktif. Link tersebut masih dalam draft atau sedang dikerjakan. Do'akan agar penulis tetap sehat dan tulisannya cepat terbit 🙏. Kamu juga bisa memberikan dukungan dengan mentrakteer kopi ☕ supaya penulis kuat begadang, hehe.