ngecoding.com logo
Memahami Konsep Combinator pada CSS

Memahami Konsep Combinator pada CSS

//if(youLikeIt || itHelpsYou)clickShare();

Combinator digunakan untuk menjelaskan hubungan antara 2 atau lebih selektor pada CSS. Combinator misalnya digunakan pada kondisi-kondisi berikut :

  • Menerapkan style pada tag <ul> hanya untuk anak dari <div class="nav">.
  • Menerapkan style pada tag <div class="desc"> yang merupakan 'saudara' dari <div class="header">.
  • ......... 

Terdapat 4 jenis combinator :

  1. Descendant Combinator. (<spasi>)
  2. Child Combinator. ( > )
  3. Adjacent Sibling Combinator. ( + )
  4. General Sibling Combinator. ( ~ )

Contoh-contoh combinator menggunakan file HTML seperti berikut :

HTML

<body>
	<div id="div-one">
		<ul class="ul-one">
				<li>Ul-One 1</li>
				<li>Ul-One 2</li>
				<li>Ul-One 3</li>
		 </ul>
		 <ul class="ul-two">
				<li>Ul-Two 1</li>
				<li>Ul-Two 2</li>
				<li>Ul-Two 3</li>
		 </ul>
	</div>
	<div id="div-two">
		<ul class="ul-one">
				<li>Ul-One 1</li>
				<li>Ul-One 2</li>
				<li>Ul-One 3</li>
		 </ul>
		 <ul class="ul-two">
				<li>Ul-Two 1</li>
				<li>Ul-Two 2</li>
				<li>Ul-Two 3</li>
		 </ul>
	</div>
</body>

Struktur pohon HTML

Struktur pohon combinator CSS by ngecoding.com

 

Berikut penjelasan masing-masing combinator.

1. Descendant Combinator (<spasi>)

Descendant Combinator menerapkan style pada elemen yang merupakan keturunan dari suatu elemen.

Pada struktur pohon HTML, ini artinya memilih semua elemen yang merupakan anak, cucu, cicit, dst.. dari suatu elemen.

Descendant Combinator disimbolkan dengan 'spasi'.

ul li{ font-weight:bold; }

Contoh 1

div li { color:#ff0000; }

Dengan CSS diatas, ilustrasinya adalah sbb :

Balon yang berwarna merah adalah elemen yang terkena efek dari selektor.
descendant combinator example 1 by ngecoding.com

Contoh 2

ul.two li { color:#ff0000; }

Descendant Combinator example by ngecoding.com

Contoh 3

#div-two ul.two li { color:#ff0000; }

Descendant Combinator example 3 by ngecoding.com

 

2. Child Combinator (>)

Child Combinator digunakan untuk menerapkan style pada semua elemen yang merupakan anak langsung dari suatu elemen.

Pada struktur pohon HTML, ini artinya memilih semua elemen yang letaknya langsung dibawah dari suatu elemen.

Child Combinator disimbolkan dengan '>'.

ul>li{ font-weight:bold; }

Contoh 1

div > li { color:#ff0000; }

Tidak ada <li> yang merupakan anak langsung dari <div>.

child combinator example 1 by ngecoding.com

Contoh 2

#div-two > ul.two > li { color:#ff0000; }

Child Combinator example 3 by ngecoding.com

 

3. Adjacent Sibling Combinator (+)

Adjacent Sibling Combinator digunakan untuk menerapkan style pada semua elemen yang merupakan saudara langsung dari suatu elemen.

Pada struktur pohon HTML, ini artinya memilih semua elemen yang letaknya tepat disamping kanan dan memiliki parent yang sama  dari suatu elemen.

Adjacent Sibling Combinator disimbolkan dengan '+'.

ul+li{ font-weight:bold; }

Contoh 1

li.first + li { color:#ff0000; }

Adjacent sibling combinator example 2 by ngecoding.com

 

Contoh 2

li + li + li { color:#ff0000; }

Adjacent sibling combinator example 3 by ngecoding.com

 

4. General Sibling Combinator (~)

General Sibling Combinator digunakan untuk menerapkan style pada semua elemen yang merupakan saudara dari suatu elemen.

Pada struktur pohon HTML, ini artinya memilih semua elemen yang letaknya disamping kanan dan memiliki parent yang sama  dari suatu elemen.

General Sibling Combinator disimbolkan dengan '~'.

ul~li{ font-weight:bold; }

Contoh 1

li.first ~ li { color:#ff0000; }

General sibling combinator example 2 by ngecoding.com

 

Contoh 2

li ~ li ~ li { color:#ff0000; }

General sibling combinator example 3 by ngecoding.com

//if(youLikeIt || itHelpsYou)clickShare();
//Advertisements
Santai Dulu //artikel g teknis
Lagi Hot //most used tags
Langganan via Email //Ini bukan spam

Masukkan alamat email anda:

Delivered by FeedBurner