Tutorial CSS: Memahami 6 Jenis Selektor di CSS

petanikode.com/css-selektor

25 Februari 2018

Ahmad Muhardian · 25 Feb 2018

#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

1/10
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.

2/10
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:

3/10
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

4/10
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

Artinya:

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

Maka hasilnya:

0:00

Selain :hover ada beberapa selektor pseudo-class lainnya:

:link untuk memlih link yang belum dikunjungi;

5/10
 :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.

6/10
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
Maka hasilnya:

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.

7/10
Silahkan lanjutkan ke:

Tutorial CSS #05: Properti Color di CSS

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)

🚧 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.

📫 Newsletter..
Mau dapat tips belajar coding, info teknologi, dan perkembangan karir sebagai
programmer?

8/10
 Subscribe

⚠ Warning!

Please disable your adBlock to support our site and free contents from Petani
Kode.

🔥 Artikel Terbaru
Tutorial CSS: Menentukan Ukuran Elemen dengan Satuan yang
Tepat
28 Mar 2023 • baca 8 menit

Tutorial Tailwind #1: Dasar Tailwind CSS untuk Pemula

14 Dec 2022 • baca 7 menit

Tutorial Membuat REST API dengan Express, Typescript, dan

PostgreSQL
25 Nov 2022 • baca 10 menit

Tutorial Docker: Cara Install dan Setup Docker dengan Benar!

24 Nov 2022 • baca 5 menit

Cara Fetch API dengan Alpinejs untuk Ambil Data dari Backend
24 Nov 2022 • baca 4 menit

9/10
Tutorial Tailwind: Membuat Card dengan Image Zoom-in Saat Hover
21 Nov 2022 • baca 3 menit

⚠ Warning!

Please disable your adBlock to support our site and free contents from Petani
Kode.

10/10