Cara menggunakan DESCENDANT pada JavaScript
|
Pada tutorial sebelumnya kalian sudah mempelajari tentang Selector dan Cara Menggunakan Simple Selector untuk memformat tag HTML. Pada tutorial ini kalian akan belajar tentang penggunakan Combinator Selector pada CSS. Apa yang dimaksud CSS Combinators Selectors?CSS Combinators Selectors adalah jenis kode CSS yang menjelaskan hubungan antara dua selector atau sering disebut dengan relasi antara selector. Ada 4 tipe kombinator yang dapat kita terapkan pada CSS yaitu :
Di bawah ini akan diuraikan satu per satu dari 4 tipe kombinator di atas. 1. Selector Descendant/TurunanSelector turunan akan mencocokkan semua elemen yang merupakan turunan dari elemen yang telah ditentukan. Misalnya adalah elemen yang merupakan turunan dari elemen Perhatikan contoh kode CSS di bawah ini. Kode CSS di atas digunakan untuk memformat elemen yang berada di
dalam
<div> <h3>Belajar Combinator Selector CSS Bersama SolusiLain.Com</h3> </div> <h3>Uji
coba H3 yang berada diluar DIV.</h3> Jika ada elemen Hasil Combinator Selector CSS Selector
child (>) ini akan memilih semua element yang merupakan anakan dari elemen yang di tentukan.
<div> <h3>Belajar Combinator Selector CSS.</h3> <p>Belajar Selector ChildCSS Bersama
SolusiLain.Com.</p> <p>Belajar Pemrograman Web Bersama SolusiLain.Com.</p> </div> Kemudian untuk kode CSS-nya, kalian bisa gunakan format berikut:
div>p{ text-align:center; color:red; } Dari kombinasi kedia kode tersebut akan menghasilkan tampilan halaman web seperti ini. Hasil Selector Child Dari contoh kode HTML dan CSS di atas terlihat 2 paragraf yang diformat dengan rata tengah dan warna merah. Selector adjacent
siblings akan memilih semua element yang “adjacent siblings” dari elemen yang di tentukan. Elemen sibling (saudara) ini harus memiliki satu level yang sama atau parent yang sama pada HTML, dan “adjacent” disini berarti element setelah elemen yang telah ditentukan (paling dekat). Contohnya jika akan memilih semua elemen yang mana diletakan setelah elemen Contoh HTML:
<body> <div> <h3>Belajar Combinator Selector CSS.</h3> <p>Belajar Selector
ChildCSS Bersama SolusiLain.Com.</p> <p>Belajar Pemrograman Web Bersama SolusiLain.Com.</p>
</div> <p>Hasil penerapan Selector adjacent siblings.</p> <p>Hasil penerapan Selector adjacent
siblings.</p> </body> Kode CSS menggunakan Selector adjacent siblings:
div+p{ text-align:right; color:blue; } hasil dari penerapan Selector adjacent siblings adalah sebagai berikut: Hasil Selector adjacent siblings CSS Dari hadil latihan Selector adjacent siblings di atas, terlihat hanya elemen pertama yang sejajar dengan General sibling selector akan memilih semua element yang bersaudara dari elemen yang di tentukan. Contohnya adalah akan memilih semua elemen yang mana diletakan setelah elemen Contoh penggunaannya kita tetap menggunakan HTML sebelumnya yang telah kita gunakan untuk latihan penggunaan Selector
Adjacent Siblings. Namun dengan merubah di kode CSS nya menjadi seperti berikut ini:
div~p{ text-align:right; color:blue; } Maka hasilnya akan terlihat seperti gambar berikut ini. Hasil Penerapan General Sibling Selector Perbedaan andara Selector adjacent siblings dan General Sibling Selector adalah dampak yang diformat
pada elemen HTML. Kalian bisa mengamati perbedaannya dari hasil latihan di atas. |
