Selektor CSS

Selektor CSS memilih elemen HTML yang ingin Anda atur.

Selektor CSS

Selektor CSS digunakan untuk "menemukan" (atau memilih) elemen HTML yang ingin Anda style.

Kita dapat membagi selektor CSS menjadi lima kategori:

• Selektor sederhana (memilih elemen berdasarkan nama, id, kelas)
• Selektor kombinator (memilih elemen berdasarkan hubungan tertentu di antara mereka)
• Selektor pseudo-class (memilih elemen berdasarkan keadaan tertentu)
• Selektor pseudo-elemen (memilih dan style bagian dari elemen)
• Atribut selektor (memilih elemen berdasarkan atribut atau nilai atribut)

Selektor elemen CSS

Selektor elemen memilih elemen HTML berdasarkan nama elemen.

Contoh

Di sini, semua <p> elemen pada halaman akan diratakan tengah, dengan warna teks merah: 

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

Selektor ID CSS

Selektor id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

Id sebuah elemen unik dalam sebuah halaman, jadi selektor id digunakan untuk memilih satu elemen unik!

Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.

Contoh

Aturan CSS di bawah ini akan diterapkan ke elemen HTML dengan id="par1": 

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

Catatan: Nama id tidak boleh dimulai dengan angka!

Selektor kelas CSS

Selektor kelas memilih elemen HTML dengan atribut kelas tertentu.

Untuk memilih elemen dengan kelas tertentu, tulis karakter titik (.), Diikuti dengan nama kelas.

Contoh

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

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

Anda juga dapat menentukan bahwa hanya elemen HTML tertentu yang harus dipengaruhi oleh sebuah kelas.

Contoh

Dalam contoh ini, hanya <p> elemen dengan class="center" yang berwarna merah dan rata tengah: 

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

Elemen HTML juga dapat merujuk ke lebih dari satu kelas.

Contoh

Dalam contoh ini elemen <p> akan diberi style sesuai dengan class="center" dan ke class="large": 

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

Catatan: Nama kelas tidak boleh dimulai dengan angka!

Selektor Universal CSS

Selektor universal (*) memilih semua elemen HTML di halaman.

Contoh

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

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

Selektor Pengelompokan CSS

Selektor pengelompokan memilih semua elemen HTML dengan definisi gaya yang sama.

Lihat kode CSS berikut (elemen h1, h2, dan p memiliki definisi style yang sama):

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

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

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

Akan lebih baik untuk mengelompokkan selektor, untuk meminimalkan kode.

Untuk mengelompokkan selektor, pisahkan setiap selektor dengan koma.

Contoh

Dalam contoh ini telah dikelompokkan selektor dari kode di atas:

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

Sumber referensi: w3schools.com