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,

Kode serial

Salin Simpan Jalankan

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,

Kode serial

Salin Simpan Jalankan

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,

Kode serial

Salin Simpan Jalankan

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;}0

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}1

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}2

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

Keluaran.

Memilih elemen berdasarkan konten atribut

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

#header{background-color:blue;}_3

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}_4

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}5

Misalnya, kodenya adalah sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}6

Contoh kodenya adalah sebagai berikut,

Kode serial

Salin Simpan Jalankan

Keluaran.

Pilih elemen dalam kondisi fokus

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

#header{background-color:blue;}_7

Misalnya, kodenya adalah sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}8

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

Keluaran.

Tambahkan elemen pseudo sebelum elemen target

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

#header{background-color:blue;}_9

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}0

Contoh penerapannya adalah sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}1

Misalnya sebagai berikut,

Kode serial

Salin Simpan Jalankan

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;}2

Contoh implementasi,

Kode serial

Salin Simpan Jalankan

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.