Kumpulan CSS Selector Yang Wajib Dikuasai

Jika bicara CSS Selector yang umumkan adalah penggunaan selector * (bintang) atau biasa disebut universal.

Nah, kali ini Blog Cara CSS akan membahas berbagai selector yang jarang digunakan oleh Blogger pada umumnya, padahal selector tersebut sangat powerfull, apa sajakah Selector tersebut, berikut 5 Selector penting yang wajib dikuasai oleh teman-teman Blogger.

Adjacent Sibling Selector '+'

Selector ini disimbolkan dengan tanda plus atau tambah ( + ). Secara mudah fungsinya untuk menambahkan efek setelah selector utama, bingung ? kita masuk contoh saja biar tidak bingung.

/* CSS */
input + span { opacity: 0;  transition: all 0.3s; }
input:hover + span { opacity: 1; padding-left: 10px; }

<!-- HTML -->
<input placeholder="Ketikkan Sesuatu" /><span>Cara CSS</span>

Jika kode tersebut dijalankan maka hasilnya akan seperti ini :

Cara CSS

General Sibling Selector '~'

General sibling sebenarnya fungsinya hampir sama dengan Adjacent (yaiyalah namanya hampir sama) tapi bedanya dia akan mengenai seluruh selector yang ada setelah selector utama.

Kode untuk membuat selector general sibling ini adalah tanda ( ~ ) kalau di matematika biasa disebut simbol unlimited atau tanpa batas.

Contoh penggunaan General Sibling.

/* CSS */
input ~ span { opacity: 0;  transition: all 0.3s; }
input:hover ~ span { opacity: 1; padding-left: 10px; }

<!-- HTML -->
<input placeholder="Ketikkan Sesuatu" /><span>Cara CSS</span><span>Cara HTML</span><span>Cara JavaScript</span>

Jika Anda dijalankan maka hasilnya akan seperti ini :

Cara CSS Cara HTML Cara JavaScript

Lalu bedanya apa dengan yang diatas ? bedana pada selector yang dikenai. Jika menggunakan Adjacent Sibling maka span yang kedua, tidak akan terkena efek, melainkan hanya span pertama saja.

Attribute Selector '[attr]'

Sector ini fungsinya untuk menggantikan Class atau ID. Penggunaanya misal pada Text Area yang hanya mempunyai property.

Contoh CSS dan HTML yang akan kita gunakan.

/* CSS */
input[type=text] { border-color: green; }
input[type=password] { border-color: blue; }

<!-- HTML --> <input type="text" placeholder="Ketikkan Sesuatu" /> <input type="password" placeholder="Ketikkan Sesuatu" />

Jika kode tersebut kita jalankan maka hasilnya akan seperti ini :

Jadi kita bisa memberikan CSS secara spesifik tanpa menambahkan selector Class dan ID

Target Selector ':target'

Selector ini biasa digunakan pada tombol back to top, atau jump to comment. Cara kerjanya hanya mengarahkan kursor menuju ID yang dituju.

Contoh, coba, Klik Disini nanti teman-teman akan dibawa kembali ke atas, tepatnya menuju id="adjacentsibling"

Checked Selector ':checked'

Biasanya kita kan menggunakan :before :after. Kali ini kita juga bisa menggunakan sekector :checked. Fungsinya untuk memberi CSS pada check box yang telah di centang

Cara Penggunaan dalam CSS.

/* CSS */ input[type=checkbox]:checked { box-shadow: 0 0 3px green; }

Lanjut tinggal Anda buat checkboxnya seperti dibawah ini.

Coba di Klik dan, lihat perubahan warnanya menjadi Hijau

Gimana jadi hijau kan ? mantap kan.

Sudah 5 Selector yang sudah bagikan kepada Anda, dan jujur sebenarnya masih banyak selector-selector unik yang ada di dalam CSS, dan jika ada waktu lebih pasti akan saya bahas juga. Sekian dan terimakasih telah membaca Kumpulan CSS Selector Yang Wajib Dikuasai Blogger.