Tutorial CSS Lengkap Pemula Part 2 || Cara Penulisan & Jenis CSS Selector

20 Jul, 2023

Pada pembahasan kali ini saya akan mebahas apa saja yang ada di CSS selector dan bagaimana cara penggunaannya, tetapi saya hanya akan membahas beberapa saja. Sisanya akan saya buat pembahasan tersendiri.

Apa saja yang kita pelajari pada pembahasan selector ini? Berikut :

Pengertian Selector
Univerasl Selector
class Selector
Id Selector
Atribut Selector
Group Selector
Child Selector
Adjacent Selector
Genneral Sibling Selector
Dynamic Pseudo Class Selector
Structural Pseudo Class Selector
Pseudo Element Selector

Pengertian Selector

Pengertian selector adalah pola atau yang digunakan untuk memilih elemen atau tag HTML tertentu di dalam halaman web. Selector memungkinkan Anda untuk mengidentifikasi elemen mana yang akan diterapkan gaya CSS yang telah kita singgung dan terapkan pada pembahasan sebelumnya.

Universal Selector

Universal selector dalam CSS adalah tanda bintang (*) yang digunakan sebagai selector untuk memilih semua elemen di halaman web. Dengan menggunakan universal selector, Anda dapat menerapkan gaya CSS ke semua elemen HTML tanpa harus menuliskan nama elemen secara spesifik.

Contoh penggunaan universal selector:

Perhatikan kode diatas apa yang terjadi? Universal selector akan menimpa efek selector class.

Class Selector

Dari awal pembahasan kita selalu menggunakan ini, selector ini berfungsi mencari tag atau element yang memiliki atribut class. class selector bisa diterapkan lebih dari 1 tag HTML. Berikut contoh dari penggunaan class selector:

Id Selector

Cara penggunaan id selector mirip seperti class selector. Jika pada class selector kita menggunakan atribut class untuk menandai tag HTML, untuk id selector yang dipakai adalah atribut id. cara penulisan selector CSS nya harus diawali dengan karakter pagar: " # ". Berikut contoh dari penggunaan Id selector:

Atribut Selector

Atribut selector dalam CSS adalah salah satu jenis selector yang memungkinkan untuk memilih elemen HTML berdasarkan atribut atau nilai atributnya, atribute selector bersifat lebih global karena bisa dipakai untuk seluruh atribut HTML (tidak hanya class dan id saja). Dengan menggunakan atribut selector, kita dapat menentukan gaya CSS untuk elemen yang memiliki atribut tertentu atau nilai atribut tertentu.

Berikut contoh dari penggunaan Atribut selector:

Selain mengakses dari nama atribut, kita juga bisa mencari tag HTML yang memiliki atribut provinsi dengan nilai "Jawa Timur" kemudian coba kita ubah warnanya menjadi hijau, Berikut contoh penggunaanya :

Group Selector

Group selector ini bukanlah jenis dari CSS selector melainkan hanya sebuah tehnik untuk menggabungkan beberapa selector ke dalam satu perintah, untuk lebih memahaminya perhatikan contoh dibawah berikut :

Perhatikan kode diatas pada baris 11, saya menggabungkan beberapa selector dalam 1 perintah, terdapat 4 selector yaitu tag h1, selector class, selector id dan atribut selector.

Child Selector

Child selector dalam CSS adalah jenis selector yang mencari elemen HTML yang merupakan anak langsung dari elemen lainnya, anak langsung berarti elemen tersebut berada tepat di bawah elemen lainnya dalam struktur hirarki.

Child selector ditandai dengan menggunakan tanda "greater than" (>) antara dua nama elemen atau jenis selector yang berurutan. Ini menunjukkan bahwa kita ingin memilih elemen kedua yang merupakan anak langsung dari elemen pertama. Untuk lebih memahaminya perhatikan contoh dibawah berikut :

Adjacent Selector

Adjacent Selector dalam CSS adalah jenis selector yang memungkinkan kita untuk mecari atau memilih elemen HTML yang berada tepat setelah elemen lainnya dalam struktur hirarki. Artinya, elemen kedua harus sibling (hubungan saudara) langsung dari elemen pertama.

Adjacent selector ditandai dengan menggunakan tanda "plus" (+) antara dua nama elemen atau jenis selector yang berurutan. Ini menunjukkan bahwa Anda ingin memilih elemen kedua yang berada tepat setelah elemen pertama.

untuk lebih memahaminya perhatikan contoh dibawah berikut :

General Sibling Selector

General sibling selector hampir sama penerapannya dengan adjecent selector, bedanya jika adjecent selector hanya mencari atau memilih satu element tag HTML saja setelah element lain, berbeda dengan general sibling mecari atau memilih elemen tag HTML yang berada tepat setelah elemen tersebut secara keseluruhan. General sibling selector ditandai dengan menggunakan tanda "plus" (~)

Suntuk lebih memahaminya perhatikan contoh dibawah berikut :

Silahkan anda pahami semua dan diulang kembali apa yang sudah kita bahas kali ini, mungkin sekian dulu pembahasannya. Untuk selanjutnya saya akan membahas jenis selector lainnya yaitu Dynamic Pseudo Class Selector, sampai jumpa dipembahasan selanjutnya:)

Baca Juga : Dynamic Pseudo Class Selector