Sudah seperti sinetron saja ya teman-teman sampai part 3 segala hehe, oke artikel kali ini masih seputar tentang attribute selector dimana Attribute selector adalah selector CSS yang digunakan untuk mencari tag HTML berdasarkan ada atau tidaknya sebuah atribut. tapi kemarin atau artikel sebelumnnya saya sudah mencoba membahasnnya dengan percobban pertama, disini saya akan melanjutkan dengan artikel yang saya beri judul mengenal attribute selector pada CSS part 3, apa saja isinnya simak terus ya teman-teman.
Seperti janji saya pada artikel sebelumnnya Bagaimana jika saya ingin mencari seluruh atribut title yang mengandung kata “kota” ? yang akan saya bahas pada mengenal attribute selector pada CSS part 3, oke seperti ini cara penulisan selectornya saya mencoba menggunakan struktur html pada artikel pertama ya teman-teman bisa klik disini:
[title~="kota"]{
color: green;
}
Perhatikan tambahan karakter tilde “ ∼ “ sebelum tanda sama dengan. Karakter tilde digunakan untuk mencari kata “kota” di dalam atribut title. Sebuah ‘kata’ didefenisikan dengan kumpulan huruf yang dipisah dengan spasi. Dalam contoh kita, hanya ada tiga kota yang miliki kata “kota” di dalam atribut title, yakni kota bandung, kota medan, dan kota makassar.
Bagaimana jika kita ingin mencari atribut title yang mengandung kata “ba”? Ini tidak bisa dilakukan dengan karakter tilde, karena tilde digunakan untuk mencari kata (yang dipisah dengan spasi). Untuk keperluan ini, kita bisa menggunakan karakter bintang “ * “, seperti contoh berikut:
[title*="ba"]{
color: green;
}
Selector diatas akan mencari seluruh atribut title yang nilainya mengandung kata “ba”. Dalam kode HTML kita ini akan cocok dengan kota bandung dan surabaya. Untuk mencari nilai atribut berdasarkan posisinya, kita bisa menggunakan karakter pangkat (caret): ” ˆ ” dan karakter dollar: ” $ “. Karakter ” ˆ ” akan mencari awalan atribut, sedangkan karakter ” $ ” digunakan untuk mencari akhiran atribut. Ini lebih mudah dijelaskan dengan contoh.
Untuk menyeleksi hanya atribut href yang diawali dengan karakter “http”, saya bisa menggunakan selector berikut ini:
[href^="http"]{
color: green;
}
Dengan kode diatas, kota jakarta akan berwarna hijau, karena atribut href pada tag <a> kota jakarta diawali dengan “http”. Bagaimana teman-teman sangat menarik ya, dan cukup jelas sepertinya, oka saya rasa cukup sampai disini dulu belajar kita tentang mengenal attribute selector pada CSS part 3, sampai jumpa pada artikel selanjutnnya terimakasih.
The post Mengenal Attribute Selector Pada CSS Part 3 appeared first on Kursus Website Terbaik.