Beranda / CSS / Pemrograman / Web

Panduan CSS Selectors: Biar Website Kamu Makin Keren! (Tutorial CSS Part 3)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 3.0 : Logo CSS

Halo teman-teman!

Kamu lagi belajar CSS dan penasaran gimana sih caranya "milih" elemen HTML yang mau dikasih gaya? Nah, jawabannya adalah CSS Selectors!

Selector di CSS itu ibarat kamu nunjuk elemen mana yang mau kamu dandani. Misalnya kamu bilang, "Eh, paragraf ini aku mau warnain merah," atau "Semua tombol pengen aku kasih border." Gimana caranya? Yuk kita bahas satu per satu!

1. Apa Itu CSS Selectors?

CSS Selector adalah cara buat memilih elemen HTML yang mau dikasih style. Jadi kamu nggak perlu kasih style satu per satu ke tiap elemen, cukup kasih selector yang tepat, dan boom! semuanya rapi dan konsisten.

2. CSS Element Selector

Selector ini dipakai buat milih elemen HTML berdasarkan nama tag-nya.

Contoh:

p {
  color: blue;
}

Artinya: Semua <p> (paragraf) bakal berubah jadi warna biru.

Selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>Teks ini berwarna biru</p>
  </body>
</html>

Hasilnya:

Mengubah element <p> menjadi biru
Gambar 3.1 : ubah elemen p menjadi biru

3. CSS ID Selector

Kalau kamu mau kasih gaya ke satu elemen aja yang punya ID tertentu, kamu bisa pakai #.

Contoh:

#judul {
  font-size: 24px;
  color: green;
}

Artinya: Elemen dengan id="judul" aja yang kena efek ini.

Selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #judul {
        font-size: 24px;
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 id="judul">Teks ini berukuran 24px berwarna hijau</h1>
  </body>
</html>

Hasilnya:

Contoh selector id
Gambar 3.2 : mengubah gaya selector id

4. CSS Class Selector

Kalau kamu pengen kasih style ke beberapa elemen yang punya class sama, pakai . (titik) di depannya.

Contoh:

.kotak {
  border: 2px solid black;
  padding: 10px;
}

Artinya: Semua elemen yang punya class="kotak" bakal kena style ini.

Selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .kotak {
        border: 2px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p class="kotak">Teks ini memiliki border berwarna hitam</p>
    <p class="kotak">Teks ini juga sama</p>
  </body>
</html>

Hasilnya:

Contoh CSS selector class
Gambar 3.3 : Contoh selector class

5. CSS Universal Selector

Selector ini ibarat kamu bilang: “Pokoknya SEMUA elemen kena gaya ini!”

Contoh:

* {
  margin: 0;
  padding: 0;
}

Biasanya dipakai buat "reset" tampilan biar rapi.

Selengkapnya:


<!DOCTYPE html>
<html>
  <head>
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    </style>
  </head>
  <body>
    <h1>Elemen ini memiliki margin 0 dan padding 0</h1>
    <p>Elemen ini juga sama</p>
  </body>
</html>

Hasilnya:

Mengubah gaya elemen dengan selector *
Contoh 3.4 : Mengubah semua elemen dengan selector *

6. CSS Grouping Selector

Punya beberapa elemen yang pengen kamu kasih style yang sama? Bisa banget!

Contoh:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Artinya: Semua heading <h1>, <h2>, dan <h3> bakal pakai font yang sama.

Selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
    h1, h2, h3 {
      font-family: Arial, sans-serif;
    }
    </style>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
  </body>
</html>

Hasilnya:

Contoh grouping selector
Gambar 3.5 : Contoh grouping selector

7. Tabel: Semua CSS Simple Selectors

Selector Contoh Deskripsi
* * Memilih semua elemen
element p Memilih semua elemen dengan tag <p>
.class .kotak Memilih semua elemen dengan class "kotak"
#id #judul Memilih elemen dengan id "judul"
group h1, p, a Memilih semua elemen h1, p, dan a

Penutup

Itu dia teman-teman, CSS Selectors versi lengkap tapi santai! Dengan memahami selector, kamu bisa ngatur tampilan website dengan lebih fleksibel dan efisien. Nggak perlu ribet, tinggal tunjuk elemen mana yang mau dikasih style, dan selesai deh!

Kalau kamu pengen lanjut belajar selector yang lebih kompleks (seperti descendant, pseudo-class, dll), tunggu artikel selanjutnya ya!

Posting Komentar untuk "Panduan CSS Selectors: Biar Website Kamu Makin Keren! (Tutorial CSS Part 3)"