Kursus IT Dasar CSS 020_Selektor

Selektor

Selektor digunakan untuk memilih elemen dalam dokumen yang perlu diberi gaya. Melalui berbagai mode pemilihan, memberitahu browser elemen mana yang mendapat gaya apa.

Selektor ID (#)

Memilih elemen berdasarkan ID uniknya. Selektor ID harus unik dalam dokumen dan tidak boleh digunakan ulang.

Contoh:

1
#myID {
2
  /* Aturan gaya */
3
}

Selektor Kelas (.)

Memilih elemen berdasarkan nama kelasnya. Selektor kelas dapat digunakan untuk beberapa elemen, dan satu elemen dapat memiliki beberapa kelas.

Contoh:

1
.myClass {
2
  /* Aturan gaya */
3
}

Selektor Elemen (p, h1)

Memilih elemen berdasarkan nama elemen HTML-nya. Selektor elemen memilih semua elemen yang cocok dalam dokumen.

Contoh:

1
p {
2
  /* Aturan gaya */
3
}

Selektor Universal (*)

Memilih semua elemen dalam dokumen. Harus digunakan dengan hati-hati karena mencocokkan semua elemen dan dapat mempengaruhi kinerja.

Contoh:

1
* {
2
  /* Aturan gaya */
3
}

Selektor Atribut ([type="text"])

Memilih elemen berdasarkan nilai atributnya. Selektor atribut dapat memilih elemen berdasarkan nilai atribut yang berbeda.

Contoh:

1
input[type="text"] {
2
  /* Aturan gaya */
3
}

Selektor Pseudo-class

Memilih keadaan atau posisi khusus elemen, seperti hover, dikunjungi, dll.

Contoh:

1
a:hover {
2
  /* Aturan gaya */
3
}

Selektor Pseudo-element

Memilih bagian khusus elemen, seperti baris pertama, huruf pertama, dll.

Contoh:

1
p::first-line {
2
  /* Aturan gaya */
3
}

Selektor Anak

Memilih elemen anak langsung dari suatu elemen. Hanya memilih anak langsung, tidak termasuk keturunan.

Contoh:

1
ul > li {
2
  /* Aturan gaya */
3
}

Selektor Saudara Umum

Memilih semua elemen saudara dengan elemen induk yang sama. Memilih semua elemen saudara setelah elemen yang ditentukan, tanpa memerlukan kedekatan.

Contoh:

1
h2 ~ p {
2
  /* Aturan gaya */
3
}

Selektor Saudara Berdekatan

Memilih elemen saudara yang langsung mengikuti elemen yang ditentukan.

Contoh:

1
h2 + p {
2
  /* Aturan gaya */
3
}

Selektor Keturunan

Memilih semua elemen keturunan di bawah suatu elemen, termasuk elemen yang bersarang dalam.

Contoh:

1
div p {
2
  /* Aturan gaya */
3
}

Selektor Gabungan (,)

Menggabungkan beberapa selektor untuk memilih semua elemen yang cocok dengan salah satunya. Digunakan untuk memilih beberapa jenis elemen sekaligus dan menerapkan aturan gaya yang sama.

Contoh:

1
h1, h2, h3 {
2
  /* Aturan gaya */
3
}

Daftar Selektor

Mendaftarkan beberapa selektor berdasarkan urutan prioritas untuk memilih yang paling sesuai.

Contoh:

1
div p,
2
.myClass,
3
#myID {
4
  /* Aturan gaya */
5
}

Aturan Penamaan Selektor

• Nama selektor harus terdiri dari huruf, angka, garis bawah, atau tanda hubung.

• Nama harus dimulai dengan huruf atau garis bawah.

• Nama tidak boleh dimulai dengan angka.

• Nama tidak boleh mengandung spasi.

  Rekomendasi:

• Gunakan nama yang bermakna: Nama selektor harus mencerminkan fungsi atau tujuan elemen yang dipilih dengan jelas.

• Ikuti konvensi penamaan: Gunakan konvensi yang konsisten seperti camelCase atau kebab-case untuk meningkatkan konsistensi kode.

• Hindari singkatan yang tidak bermakna: Hindari singkatan yang terlalu pendek atau tidak bermakna agar pengembang lain dapat memahami.

• Ikuti semantik: Gunakan selektor semantik untuk meningkatkan keterbacaan dan pemeliharaan kode.