CSS Combinators
Nah, untuk pembahasan kali ini, saya akan membahas tentang CSS Combinators. Combinator itu apa sih? Combinator adalah sesuatu yang di gunakan untuk menjelaskan hubungan antar selector. Kalau masih ada yang bingung apa itu selector dalam css, saya akan memberikan penjelasan singkat tentang apa itu selector.Nah, karena CSS itu digunakan untuk mengubah tampilan dari tag HTML, CSS membutuhkan sesuatu untuk menghubungkan kode CSS dengan tag HTML. Ini yang di maksud selector dalam css.
Di dalam css ada banyak macam selectors, contohnya universal selectors(*{}), gunanya untuk diaplikasikan pada semua elemen dalam dokumen HTML. Masih ada Type Selector, yang gunanya untuk diaplikasikan sesuai dengan nama elemennya, misalnya p,div,h1{}. Maka yang akan menjadi targetnya adalah <p>, <div> dan <h1>.
Kembali ke pembahasan awal kita, yaitu css combinators. CSS combinators biasanya digunakan dalam situasi - situasi seperti ini, misalnya:
Kita ingin mengubah tampilan html dari semua tag <p> yang terdapat di dalam tag <div>. Kalau tag <p> tidak berada di dalam div dia tidak akan terubah.
Terdapat 4 combinators berbeda dalam css:
descendant selector yang di lambangkan dengan (space)
child selector yang di lambangkan dengan simbol lebih besar dari(>)
adjacent sibling selector yang di lambangkan dengan simbol Tambah (+)
general sibling selector yang di lambangkan dengan simbol Tilde (~)
Sekarang mari kita bahas satu persatu.
Descendant Selector(space)
Descendant Selector menerapkan style pada elemen yang merupakan keturunan dari suatu elemen. Misalnya seperti ini, saya memiliki coding html yang seperti ini:
Saya ingin membuat warna font tag <p> yang berada di dalam div menjadi berwarna biru dan tag <p> yang berada di luar div tidak berubah atau tetap. Maka untuk membuat hal itu mungkin, saya harus menggunakan descendant selector. Begini cara penulisan descendant selectornya:
Dengan penulisan :
div p {
}
menandakan bahwa hanya tag p yang berada di dalam div lah yang bisa di ubah tampilannya.
Maka jika coding tersebut dijalankan, hasil yang akan tampak seperti ini:
Child Selector(>)
Child Selector digunakan untuk mengatur style elemen yang merupakan “anak” dari suatu elemen. Contohnya ul>li{}. Dengan penulisan seperti itu, maka yang akan menjadi target adalah setiap elemen <li> yang merupakan anak dari element <ul>. Tidak untuk semua elemen <li>.
Contohnya seperti ini:
Saya memiliki code html seperti ini, saya ingin membuat li yang berada di dalam ul berubah warna menjadi warna biru. Maka dengan menambahkan coding seperti ini di style, saya dapat memperoleh hasil yang saya inginkan.
Maka hasilnya akan jadi seperti ini:
Setelah membahas child dan descendant selector, mungkin kalian akan bertanya - tanya, apa sih perbedaan descendant dan child selector? Sepertinya fungsinya sama saja. Namun, ada hal yang membedakan antara child dan descendant selector.
Descendant selector akan mencari seluruh tag <h2> yang berada di dalam tag <div>, walaupun tag <h2> tersebut berada di dalam tag lain (nested tag). Selama tag <h2> berada di bawah tag <div>, maka descendant selector akan menemukan tag tersebut. Sedangkan child selector, hanya akan mencari seluruh tag <h2> yang merupakan turunan langsung dari tag <div>.
Supaya lebih jelas, perhatikan code di bawah ini:
Misalnya, saya memiliki code HTML sepert ini:
Pertama - tama kita gunakan terlebih dahulu descendant selector:
Dengan menggunakan descendant selector, maka yang akan terkena efek adalah semua tag <li> yang berada di dalam tag <ul> walaupun ada dua tag <li> yang berada di dalam <div>. Hasilnya akan menjadi seperti ini:
Berbeda jika kita menggunakan child selector. Jika kita menggunakan child selector seperti ini:
Maka hasil yang akan kita dapatkan menjadi seperti ini:
Hal ini di karenakan dua tag <li> yang terakhir bukan merupakan anak dari tag <ul> secara langsung, melainkan terdapat satu tag <div> yang terletak di atas tag <li> tersebut.
Bagaimana? Sudah mengertikan apa perbedaan descendant dan child selector? Sekarang, mari kita lanjutkan ke pembahasan berikutnya.
Adjacent Sibling Selector (+)
Adjacent Sibling Combinator digunakan untuk memberi efek pada element yang terletak di bawah element awal yang akan diberi efek. Misalnya seperti ini, h1+p {}
Yang menjadi target adalah elemen <p> yang muncul pertama kali setelah elemen <h1> dan tidak berlaku bagi elemen <p> yang lain.
Contohnya seperti ini:
Jika saya menambahkan code css adjacent sibling selector seperti ini:
Maka hasil yang akan di hasilkan akan menjadi seperti ini:
Hal ini dikarenakan, Adjacent Sibling selector hanya akan mengubah efek pada element yang terletak di bawah element awal yang akan diberi efek.
General Sibling Selector(~)
General Sibling Selector, digunakan untuk mengatur elemen yang merupakan “saudara kandung” atau muncul setelah elemen yang dimaksud. Misalnya seperti ini, h1~p {} apabila ada dua elemen <p> yang muncul setelah elemen <h1>, maka keduanya akan terkena efek pengaturan style ini. Berbeda dengan adjacent sibling selector yang hanya akan mengubah efek pada satu elemen di bawah elemen yang di maksud.
Contohnya masih menggunakan code html yang sama dengan adjacent sibling:
Jika kita ganti stylenya dengan penulisan general sibling selector seperti ini:
Maka, hasil yang akan kita dapatkan akan menjadi seperti ini:
Nah, dengan ini, kita bisa melihat perbandingan antara menggunakan Adjacent dan General sibling.
Sekian yang dapat saya jelaskan tentang css combinators, semoga bermanfaat.
CSS Navigation Bars
Apa sih yang di maksud dengan Navigation Bars? Navigation Bars adalah sebuah balok navigasi yang terletak di bagian atas halaman web. Bentuknya bisa kecil memanjang secara horizontal dan vertikal. Untuk pembahasan kali ini, saya akan menjelaskan cara untuk membuat navigation bar vertikal, navigation bar horizontal, dan fixed navigation bars.Pertama - tama, saya akan menjelaskan cara untuk membuat navigation bar vertikal:
Kira - kira navigation bar vertikalnya akan menjadi seperti ini:
Pertama - tama untuk membuat tampilan navigation barnya, kita gunakan tag <ul> dan <li>, seperti ini:
Kita menggunakan # hanya untuk link coba - coba. Di web sebenarnya kita akan menggunakan URLs.
Setelah itu, kita berikan style pada tiap - tiap elementnya:
Kita memberikan list-style-type :none pada ul agar tidak ada bullets yang muncul, setelah itu kita atur widthnya. Margin dan paddingnya diberikan angka 0 dan background-colornya berikan warna deepskyblue.
Setelah itu, pada element a di dalam li, kita berikan beberapa code dengan menggunakan descendant selector yang sudah kita bahas sebelumnya. Display untuk menampilkan apa yang menjadi tampilan a, warnanya putih, jarak dari dalam ke contentnya kita berikan 8px dan 16 px, dan untuk text decorationnya kita beri none. Dengan memberi none pada text-decorationnya, itu akan menghilangkan garis underline berwarna biru yang biasanya muncul jika kita akan mengklik sebuah link.
Setelah itu, atur hovernya:
Jika di hover, maka background colornya akan menjadi warna biru gelap dan warnya akan berubah menjadi biru langit.
Nah, cukup sekian tentang vertikal navigation bar. Sekarang saya akan menjelaskan tentang horizontal navigation bar.
Pada dasarnya, untuk membuat vertikal dan horizontal navigation bars, memiliki banyak kesamaan di codenya, yang membedakan adalah untuk horizontal, kita hanya perlu menambahkan float : left di li-nya agar navigation bar memiliki option yang memanjang ke samping.
Sesuai dengan yang saya buat, maka hasilnya kira - kira akan menjadi seperti ini:
Tidak jauh berbeda dengan coding vertikal navigation bar yang sebelumnya, kita hanya perlu menambahkan float left di elemen linya.
Seperti ini:
Untuk itu, sekarang kita coba membuat fixed navigation bars, yaitu navigation bars yang akan selalu berada tepat di posisi itu.
Untuk membuat fixed navigation bars, kita hanya perlu menambahkan code overflow dan position di tag ul.
Setelah menambahkan overflow dan positon, maka navigation bar tersebut akan menjadi fixed navigation bar.
Sekian yang dapat saya jelaskan tentang CSS Navigation bars. Terimakasih, semoga bermanfaat.
No comments:
Post a Comment