Cara menggunakan pemilih css semua saudara

Kami dapat menentukan lebih dari satu elemen target menggunakan gaya blok. Caranya adalah sebagai berikut,

target_element1, target_element2, target_element3, target_element4 {color:red;}

Misalnya sebagai berikut,

Keluaran.

Memilih secara khusus berdasarkan elemen induk

Kita bisa menspesifikasikan elemen tertentu secara khusus berdasarkan keturunannya sehingga elemen lain tidak terpengaruh oleh css. Caranya adalah sebagai berikut,

element_parent1_to_n target_element {color:red;}

Misalnya sebagai berikut,

Keluaran.

Pilih secara spesifik berdasarkan id, class dan atribut lainnya

Kita dapat menentukan elemen tertentu secara khusus berdasarkan atributnya sehingga elemen lain tidak terpengaruh oleh css. Caranya adalah sebagai berikut,

target_eleme#id.class1.class2.class3 {color:red;}

Misalnya sebagai berikut,

Keluaran.

Pilih elemen anak satu tingkat dari elemen induk

Kita bisa menentukan elemen target berdasarkan elemen satu tingkat di atasnya. Caranya adalah sebagai berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Pilih elemen saudara satu tingkat di bawahnya

Selector dapat kita gunakan untuk menentukan elemen target berdasarkan elemen saudara satu tingkat di atasnya. Caranya adalah sebagai berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Pilih semua elemen saudara di bawahnya

Kita dapat memilih semua elemen target yang berada di bawah elemen tertentu. Caranya adalah sebagai berikut,

iklan

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Memilih elemen berdasarkan konten atribut

Kita juga bisa menggunakan atribut value untuk membuat pemilih, caranya adalah sebagai berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Memilih elemen jika atribut konten berisi teks tertentu

Jika kita ingin memilih suatu elemen jika atributnya berisi teks tertentu, maka caranya adalah sebagai berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Pilih elemen dalam status aktif

Misalnya kita ingin memberi style pada elemen button ketika di klik, maka caranya adalah sebagai berikut,

#header{background-color:blue;}

Misalnya, kodenya adalah sebagai berikut,

Keluaran.

Memilih elemen yang disorot oleh mouse (mouse over)

Jika kita ingin memberi style pada elemen yang disorot menggunakan mouse, maka caranya adalah sebagai berikut,

#header{background-color:blue;}

Contoh kodenya adalah sebagai berikut,

Keluaran.

Pilih elemen dalam kondisi fokus

Untuk memberi gaya pada elemen input aktif kita dapat menggunakan metode berikut,

#header{background-color:blue;}

Misalnya, kodenya adalah sebagai berikut,

Keluaran.

Menambahkan elemen semu setelah elemen target

Elemen semu adalah elemen tambahan yang dibuat menggunakan css tetapi tidak dapat diakses menggunakan javascript DOM Api. Untuk menambahkan elemen semu setelah elemen target kita bisa menggunakan cara berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Tambahkan elemen pseudo sebelum elemen target

Untuk menambahkan elemen semu sebelum elemen target kita bisa menggunakan cara berikut,

#header{background-color:blue;}

Misalnya sebagai berikut,

Keluaran.

Memilih semua elemen target kecuali elemen dengan spesifikasi tertentu

Kita dapat menggunakan nada semu untuk mengecualikan elemen tertentu agar tidak diberi gaya. Caranya adalah sebagai berikut

.post-article{margin:9px 9px 9px 9px;}

Contoh penerapannya adalah sebagai berikut,

Keluaran.

Ubah warna konten elemen target yang diblokir

Umumnya ketika kita memblokir teks, warna defaultnya adalah biru, tetapi kita dapat mengaturnya dengan cara berikut,

.post-article{margin:9px 9px 9px 9px;}

Misalnya sebagai berikut,

Keluaran.

Memilih elemen ketika memiliki elemen tertentu di dalamnya (Dukungan di CSS4)

Terakhir adalah teknik menggunakan pemilih untuk menentukan elemen target jika memiliki elemen tertentu di dalamnya (hanya didukung di css4, hampir banyak browser tidak mendukung pemilih ini). Caranya adalah sebagai berikut,

.post-article{margin:9px 9px 9px 9px;}

Contoh implementasi,

Keluaran.

Itu tadi beberapa trik penulisan selector yang bisa kita lakukan untuk memberi styling pada elemen, sebenarnya masih banyak trik lainnya, namun yang baru saja kita pelajari adalah trik selector yang umum dilakukan.