Beranda
CSS

Jenis Selektor di CSS

Itulah tadi penjelasan mengenai berbagai jenis selektor di CSS yang wajib kalian pahami jika ingin membuat website tampil menarik dan rapi.
Kode Violet
Jenis Selektor di CSS

Hai teman-teman! Kalian pasti sudah sering dengar tentang CSS, ya kan? Nah, pada kesempatan ini kodeviolet.com akan membahas tentang jenis selektor di CSS yang menjadi dasar penting dalam mengatur tampilan halaman web.

Apa Itu Selektor di CSS?

Selektor di CSS adalah bagian dari kode yang digunakan untuk memilih elemen HTML yang akan diberikan gaya (style). Dengan selektor, kalian bisa mengatur warna, ukuran, posisi, dan lainnya untuk elemen tertentu di halaman web kalian.

Jenis-Jenis Selektor di CSS

Berikut ini adalah beberapa jenis selektor yang umum digunakan dalam CSS:

Jenis Selektor Contoh Deskripsi
Selektor Tag p, h1, div Memilih semua elemen HTML dengan tag tertentu.
Selektor ID #header, #footer Memilih elemen berdasarkan atribut ID. Hanya bisa digunakan satu kali.
Selektor Class .menu, .highlight Memilih elemen berdasarkan atribut class. Bisa digunakan berkali-kali.
Selektor Universal * Memilih semua elemen di halaman.
Selektor Atribut input[type="text"] Memilih elemen berdasarkan atribut tertentu.
Selektor Turunan div p Memilih elemen <p> yang berada di dalam <div>.
Selektor Anak ul > li Memilih elemen <li> yang merupakan anak langsung dari <ul>.
Selektor Adjacent h2 + p Memilih elemen <p> yang langsung mengikuti <h2>.
Selektor Saudara Umum h2 ~ p Memilih semua <p> yang bersaudara dengan <h2> dalam satu induk.
Selektor Pseudo-Class a:hover, li:first-child Memilih elemen berdasarkan keadaan atau posisi khusus.
Selektor Pseudo-Element p::first-line, div::before Memilih dan memodifikasi bagian tertentu dari elemen.

Contoh Penggunaan CSS dengan Berbagai Selektor

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Selektor CSS</title>
  <style>
    h1 {
      color: blue;
    }
    #intro {
      font-style: italic;
    }
    .highlight {
      background-color: yellow;
    }
    p::first-line {
      font-weight: bold;
    }
    a:hover {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Judul Utama</h1>
  <p id="intro">Ini adalah paragraf pembuka dengan ID.</p>
  <p class="highlight">Paragraf ini memiliki class highlight.</p>
  <a href="#">Ini adalah tautan</a>
</body>
</html>

Kesimpulan

Itulah tadi penjelasan mengenai berbagai jenis selektor di CSS yang wajib kalian pahami jika ingin membuat website tampil menarik dan rapi. Setiap jenis selektor punya fungsi dan kegunaan yang berbeda, jadi penting untuk tahu kapan harus menggunakan yang mana. Semoga bermanfaat dan sampai jumpa di artikel kodeviolet.com berikutnya!

Posting Komentar