Pemilih CSS

Pemilih CSS

Pemilih CSS digunakan untuk 'menemukan' (atau memilih) elemen HTML yang akan disetting gaya.

Kami dapat membagi pemilih CSS menjadi lima kategori:

Halaman ini akan menjelaskan pemilih CSS yang paling dasar.

Pemilih Elemen CSS

Pemilih elemen memilih elemen HTML berdasarkan nama elemen.

Contoh

Di sini, semua elemen <p> di halaman akan menengah dan berwarna teks merah:

p {
  text-align: center;
  color: red;
}

Coba sendiri

Pemilih id CSS

Pemilih id menggunakan atribut id elemen HTML untuk memilih elemen khusus.

Id elemen unik di halaman, jadi pemilih id digunakan untuk memilih elemen unik!

Untuk memilih elemen yang memiliki id tertentu, tulis tanda pagar (#) diikuti dengan id elemen.

Contoh

Aturan CSS ini akan diterapkan pada elemen HTML dengan id="para1":

#para1 {
  text-align: center;
  color: red;
}

Coba sendiri

Perhatian:Nama id tidak boleh dimulai dengan angka.

Pemilih kelas CSS

Pemilih kelas memilih elemen HTML dengan atribut class khusus.

Untuk memilih elemen yang memiliki kelas tertentu, tulis karakter titik (.) diikuti dengan nama kelas.

Contoh

Dalam contoh ini, semua elemen HTML dengan class="center" akan berwarna merah dan menengah:

.center {
  text-align: center;
  color: red;
}

Coba sendiri

Anda juga dapat menentukan hanya elemen HTML tertentu yang akan dipengaruhi oleh kelas.

Contoh

Dalam contoh ini, hanya elemen <p> dengan class="center" yang akan diatur untuk menengah:

p.center {
  text-align: center;
  color: red;
}

Coba sendiri

Elemen HTML juga dapat mengacu kepada beberapa kelas.

Contoh

Dalam contoh ini, elemen <p> akan disetting gaya berdasarkan class="center" dan class="large":

<p class="center large">Paragraf ini mengacu kepada dua kelas.</p>

Coba sendiri

Perhatian:Nama kelas tidak boleh dimulai dengan angka!

Pemilih umum CSS

Pemilih umum (*) memilih semua elemen HTML di halaman.

Contoh

Aturan CSS di bawah ini akan mempengaruhi setiap elemen HTML di halaman:

* {
  text-align: center;
  color: blue;
}

Coba sendiri

Pemilih grup CSS

Pemilih grup memilih semua elemen HTML dengan definisi gaya yang sama.

Lihat kode CSS di bawah ini (elemen h1, h2, dan p memiliki definisi gaya yang sama):

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Baiknya mengelompokkan pemilih untuk mengurangi kode sebesar mungkin.

Untuk mengelompokkan pemilih, gunakan koma untuk memisahkan setiap pemilih.

Contoh

Dalam contoh ini, kita mengelompokkan pemilih di dalam kode di atas:

h1, h2, p {
  text-align: center;
  color: red;
}

Coba sendiri

Semua pemilih CSS sederhana

Pemilih Contoh Deskripsi contoh
.class .intro Pilih semua elemen dengan class="intro".
#id #firstname Pilih elemen yang idnya adalah "firstname".
* * Pilih semua elemen.
element p Pilih semua elemen <p>.
element,element,.. div, p Pilih semua elemen <div> dan semua elemen <p>.

Bacaan Lanjutan

Buku Lengkap:Pemilih Elemen CSS

Buku Lengkap:Pemilih Grup Elemen CSS

Buku Lengkap:Pemilih Klasifikasi CSS

Buku Lengkap:Pemilih ID CSS

Buku Lengkap:Pemilih Attribut CSS

Buku Lengkap:Pemilih Anak-Anak

Buku Lengkap:Pemilih Anak Elemen

Buku Lengkap:Pemilih Saudara Kiri