Skip to content
Multi Doc

Css Dasar

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:

Terminal window
p {
    color: blue;
}

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

Kalau misalnya kita punya struktur HTML seperti ini:

Terminal window
<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:

Terminal window
.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:

Terminal window
<p>Saya sedang belajar <b class="red">CSS</b> di rumah.</p>

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:

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

Lalu pada kode HTML:

Terminal window
<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:

Terminal window
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:

Terminal window
<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:

Terminal window
* {
    border: 1px solid grey;
}

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

Hasilnya:

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:

  • pseudo-class selektor untuk state elemen
  • 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.

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

Contoh:

Terminal window
a:hover {
  color: green;
}

Contoh Kode lengkap

Terminal window
<html>
  <head>
    <title>Selector Pseudo Class</title>
    <style>
        a:hover {
            color: green;
        }
    </style>
  </head>
  <body>
    <a href="#">Link to doc-cidara</a>
  </body>
</html>

Artinya:

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

Masih banyak lagi, list lengkapnya bisa kamu cek di SINI

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.

Misalnya kita punya elemen paragraf seperti ini:

Terminal window
<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.

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

Terminal window
<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:

Terminal window
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.

Terminal window
p::first-line {
  color: magenta;
}

Kode lengkapnya

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:

List lengkap pseudo-element bisa kamu cek di SINI