Cara menggunakan parent child css

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 :

  1. Selector descendant / turunan (spasi)
  2. Selector child (>)
  3. Selector adjacent siblings (+)
  4. General sibling selector (~)

Di bawah ini akan diuraikan satu per satu dari 4 tipe kombinator di atas.

1. Selector Descendant/Turunan

Selector turunan akan mencocokkan semua elemen yang merupakan turunan dari elemen yang telah ditentukan.

Misalnya adalah elemen <h3> yang merupakan turunan dari elemen <div> atau dapat disebut dengan <h3> di dalam <div>.

Perhatikan contoh kode CSS di bawah ini.

1

2

3

div h3{

color: red;

}

Kode CSS di atas digunakan untuk memformat elemen <h3> yang berada di dalam <div>. Seperti contoh kode HTML berikut ini.

1

2

3

4

5

<div>

<h3>Belajar Combinator Selector CSS Bersama SolusiLain.Com</h3>

</div>

 

<h3>Uji coba H3 yang berada diluar DIV.</h3>

Jika ada elemen <h3> yang berada di luar elemen <div> maka tidak adakan terformat. Adapun hasil dari Kode HTML dan CSS di atas adalah sebagai berikut:

Cara menggunakan parent child css

Hasil Combinator Selector CSS

 

2. Selector Child (>)

Selector child (>) ini akan memilih semua element yang merupakan anakan dari elemen yang di tentukan.
Contohnya adalah elemen <p> yang merupakan turunan dari elemen <div>, seperti contoh kode HTML berikut ini:

1

2

3

4

5

<div>

<h3>Belajar Combinator Selector CSS.</h3>

<p>Belajar Selector Child CSS Bersama SolusiLain.Com.</p>

<p>Belajar Pemrograman Web Bersama SolusiLain.Com.</p>

</div>

Kemudian untuk kode CSS-nya, kalian bisa gunakan format berikut:

1

2

3

4

div > p{

text-align: center;

color: red;

}

Dari kombinasi kedia kode tersebut akan menghasilkan tampilan halaman web seperti ini.

Cara menggunakan parent child css

Hasil Selector Child

Dari contoh kode HTML dan CSS di atas terlihat 2 paragraf yang diformat dengan rata tengah dan warna merah.

3. Selector adjacent siblings (+)

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 <p> yang mana diletakan setelah elemen <div>. Meskipun Selector ini jarang digunakan namun perlu juga kita pamahi sehingga jika sewaktu-waktu membutuhkan kalian tinggal menggunakannya.

Contoh HTML:

1

2

3

4

5

6

7

8

9

10

11

<body>

<div>

<h3>Belajar Combinator Selector CSS.</h3>

<p>Belajar Selector Child CSS 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:

1

2

3

4

div + p{

text-align: right;

color: blue;

}

hasil dari penerapan Selector adjacent siblings adalah sebagai berikut:

Cara menggunakan parent child css

Hasil Selector adjacent siblings CSS

Dari hadil latihan Selector adjacent siblings di atas, terlihat hanya elemen <p> pertama yang sejajar dengan <div> yang di format, sedang <p> di bawahnya tidak diformat sama sekali.

 

4. General Sibling Selector

General sibling selector akan memilih semua element yang bersaudara dari elemen yang di tentukan. Contohnya adalah akan memilih semua elemen <p> yang mana diletakan setelah elemen <div>.

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:

1

2

3

4

div ~ p{

text-align: right;

color: blue;

}

Maka hasilnya akan terlihat seperti gambar berikut ini.

Cara menggunakan parent child css

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.

Apa itu nth Child () CSS?

Yang dimaksud nth-child adalah selector yang digunakan untuk memberikan property pada tag atau class yang yang ada pada urutan tertentu.

Last Child pada CSS untuk apa?

Pseudo class tersebut baru diperkenalkan pada CSS 3, digunakan untuk menseleksi element children yang berada pada urutan terakhir. Element children ini berlaku untuk tiap-tiap parent yang ada di dalam suatu group element.

Apa itu Child selector?

Child Selector adalah selector di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML. Karena tag-tag HTML dapat berisi tag lain, maka struktur HTML dapat diibaratkan dengan 'pohon keluarga'.

Apa itu Descendant selector?

Selector descendant berarti selector yang merupakan turunan dari sesuatu. Direct child selector berarti turunan secara langsung atau anak. Untuk indirect Adjacent Sibling ini adalah seperti Direct Adjacent Sibling tetapi letaknya tidak harus berdekatan.