Pemilih CSS

Pemilih CSS

Selector CSS digunakan untuk 'mencari' (atau memilih) elemen HTML yang akan diatur gaya.

Kami dapat membagi selector CSS menjadi lima kategori:

Halaman ini akan menggambarkan pemilihan paling dasar selector CSS.

Pemilih Elemen CSS

Pemilih elemen memilih elemen HTML berdasarkan nama elemen.

Contoh

Di sini, semua elemen <p> di halaman akan diatur 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 kepada 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 diatur 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 secara maksimal.

Untuk mengelompokkan pemilih, gunakan tanda koma untuk memisahkan setiap pemilih.

Contoh

Dalam contoh ini, kami mengelompokkan pemilih di atas kode:

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 id='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 Luar Biasa:Pemilih Elemen CSS

Buku Luar Biasa:Pemigroupan Pemilih CSS

Buku Luar Biasa:Penjelasan Pemilih Class CSS

Buku Luar Biasa:Penjelasan Pemilih ID CSS

Buku Luar Biasa:Penjelasan Pemilih Properti CSS

Buku Luar Biasa:Pemilih Anak CSS

Buku Luar Biasa:Pemilih Anak Elemen CSS

Buku Luar Biasa:Pemilih Saudara Kepada Kiri CSS