Belajar CSS Part 12 CSS Combinators

Belajar CSS Part 12 Combinators

 

Assalamualaikum Wr. Wb.

PENGERTIAN

Combinators merupakan sebuah properti yang terdapat di dalam CSS yang berfungsi untuk menghubungkan antara beberapa selektor.

Terdapat empat combinators yang berbeda yang berada di dalam CSS, khususnya CSS3 :

• Descendant selector (space) ==> (selektor berdasarakan keturunan)
• Child selector (>) ==> (selektor berdasarkan anak)
• Adjacent sibling selector (+) ==> (selektor berdasarkan saudara yang berdekatan)
• General sibling selector (~) ==> (selektor berdasarkan saudra secara umum)

LATAR BELAKANG

Banyak orang yang terlalu banyak menuliskan kode CSS dengan selektor, padahal kita dapat meringkasnya berdasarkan kegunaannya masing-masing. Combinators ini memudahkan kita dalam meringkas kode di dalam CSS.

MAKSUD & TUJUAN

• Memudahkan dalam menggabungkan beberapa selektor menjadi satu.
• Dapat meringkas penggunaa kode di dalam CSS.

ALAT & BAHAN

• Laptop/PC
• Text Editor
• Browser

LANGKAH KERJA

• Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari elemen tertentu.  Artinya selektor pertama pada properti ini merupakan elemen utama sedangkan selektor selanjutnya merupakan ketururan dari selektor pertama.

Contoh :

Kita mencoba menghubungkan selektor div dan p dengan menggunakan properti Descendant Selektor (berdasarkan keturunan).

  

Dari hasil di atas kita mengetahui bahwa properti ini berfungsi jika sebuah selektor di dalam selektor keturunan. Jadi properti ini hanya berfungsi jika sebuah elemen berada di dalam elemen utama pada porperti Descendant Selektor.

• Child Selector

Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen teretentu.  Artinya elemen pertama pada selektor ini merupakan sebuah induk dan elemen selanjutnya merupakan anak dari induk tersebut, dengan penghubung (>) maka otomatis elemen selanjutnya adalah anak.

Contoh :

Nb : Untuk menghubungkan elemen induk dengan elemen anak dapat menggunakan syntaks (>).

Pada paragraf ketiga diatas berada di dalam div, tapi sudah masuk ke dalam induk lain, dengan kata lain paragraf ketiga ini bukan anak dari induk div tersebut.

• Adjacent Sibling Selector

Adjacent sibling selector akan memilih semua elemen yang  merupakan saudara kandung (atau setingkat) dan berdekatan dengan elemen tertentu. Artinya properti ini hanya berfungsi untuk elemen yang berdekatan dengan elemen utama.

Contoh :

Nb : Cara penggunaannya dengan menghubungkan dua elemen dengan tanda (+).

Dari hasil di atas dapat disimpulkan kenapa paragraf empat yang berfungsi dengan properti ini. Karena paragraf 1,2,3 merupakan anak dan keturunan dari elemen div, jadi properti ini tidak berfungsi, sedangkan untuk paragraf 5 walaupun dia tidak di dalam div tapi jaraknya lebih jauh dari paragraf 4. Maka kesimpulannya properti ini hanya berfungsi untuk elemen yang memiliki jari satu tingkat dengan elemen utaman dan tidak merupakan keturunan dari elemen yang lainnnya.

• General Sibling Selector

General sibling selector akan memilih semua elemen yang merupakan saudara kandung dari elemen tertentu. Artinya properti ini memiliki fungsi yang hampir sama dengan Adjacent di atas. Namun properti ini berlaku untuk semua elemen yang merupakan saudara kandung dan tidak berpengaruh dengan jarak.

Contoh:

Nb: Untuk menghubungkan kedua elemen menggunakan syntaks (~).

Nah gambar di atas adalah hasilnya, hasilnya berbeda dengan properti Adjacenct properti ini berfungsi untuk semua elemen yang berdekatan dengan properti ini tanpa dipengaruhi oleh jarak.

Demikian penjelasan dari saya, jika ada kata atau makna yang kurang tepat mohon maaf.

Syukron

Wassalamualaiku Wr. Wb.

Referensi

http://w3schools.com

http://www.nulis-ilmu.com/2014/12/tutorial-css-part-19-menggunakan-kombinasi-selector.html