Tutorial Belajar CSS Part 34 – Kombinasi Selector CSS

bySetyo Wibowo ID - 0

Dalam tutorial kali ini akan membahas mengenai Kombinasi pada selector CSS, jika anda belum mengetahui mengenai apa itu Selector CSS, bisa melihat terlebih dahulu tutorial CSS mengenai Selector CSS.





Dalam tutorial Selector CSS kita telah membahas mengenai beberapa jenis selector yang bisa anda gunakan dalam css, seperti class, id, tag selector, dan universal selector.





Nah dalam tutorial kali ini kita akan membahas mengenai kombinasi yang bisa anda lakukan pada selector – selector tersebut.





CSS menyediakan beberapa fitur untuk melakukan kombinasi tersebut, beberapa fitur tersebut antara lain :





  • Descendant selector
  • Child selector
  • Adjacent sibling selector
  • General sibling selector




Descendant Selector





Fitur ini digunakan untuk mencari tag HTML berdasarkan struktur hubungan antara parent dan childnya, nah kalau bingung silahkan perhatikan skrip dibawah :





<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div p 
	{
    	background-color: salmon;
	}
</style>
<body>
	<div>
		<p>Paragraf 1</p>
		<p>Paragraf 2</p>
		<p>Paragraf 3</p>
		<span><p>Paragraf 4</p></span>
	</div>
		<p>Paragraf 5</p>
		<p>Paragraf 6</p>
</body>
</html>




Semisal kita simpan dengan nama descendant_selector.html, lalu kita buka dibrowser :









Keterangan :





  1. pada paragraf 1 – 4 mendapatkan warna salmon (merah muda), karena paragraf 1 – 4 berada didalam tag <div>, karena selector div p yang artinya mencari tag paragraf didalam tag div.
  2. Sedangkan paragraf 5 – 6 tidak mendapatkan warna salmon karena memang berada diluar dari tag div




Child Selector





Berikutnya adalah child selector, fitur ini memiliki konsep yang hampir sama dengan descendant selector, yang membuat berbeda adalah child selector akan memilih elemen yang menjadi child langsung dari sebuah parent, coba perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div > p 
	{
    	background-color: salmon;
	}
</style>
<body>
	<div>
		<p>Paragraf 1</p>
		<p>Paragraf 2</p>
		<p>Paragraf 3</p>
		<span><p>Paragraf 4</p></span>
	</div>
		<p>Paragraf 5</p>
		<p>Paragraf 6</p>
</body>
</html>




Semisal kita simpan dengan nama child_selector.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :









Keterangan :





  • Pada paragraf 1 – 3 mendapatkan warna salmon (merah muda).
  • Paragraf 4 tidak masuk dalam child selector, karena bukan merupakan child langsung dari parent <div> karena paragraf 4 berada di dalam tag <span> jadi paragraf 4 masuk dalam descendant selector bukan child selector




Adjacent Selector





Adjacent selector adalah fitur yang digunakan untuk memilih elemen yang berada tepat setelah elemen yang ditentukan, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div + p 
	{
    	background-color: salmon;
	}
</style>
<body>
	<div>
		<p>Paragraf 1</p>
		<p>Paragraf 2</p>
		<p>Paragraf 3</p>
		<span><p>Paragraf 4</p></span>
	</div>
		<p>Paragraf 5</p>
		<p>Paragraf 6</p>
</body>
</html>




Semisal kita simpan dengan nama adjacent_selector.html, lalu kita buka di browser maka hasilnya adalah :









Keterangan :





  • Paragraf 5 mendapatkan warna salmon (merah muda) hal tersebut dikarenakan paragraf 5 tetap berada setelah tag <div> sehingga mendapatkan warna salmon
  • Adjacent selector akan memilih elemen pertama yang berada setelah elemen yang ditentukan, dalam contoh ini karena kita tuliskan div + p, jadi paragraf 5 yang mendapatkan warna salmon karena berada setelah tag div




General Sibling selector





Merupakan fitur yang memiliki konsep yang sama dengan adjacent selector, yang berbeda jika adjacent selector akan memilih 1 elemen saja setelah elemen yang ditentukan, general sibling selector akan memilih seluruh elemen yang berada setelah elemen yang ditentukan, untuk contoh perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div ~ p 
	{
    	background-color: salmon;
	}
</style>
<body>
	<div>
		<p>Paragraf 1</p>
		<p>Paragraf 2</p>
		<p>Paragraf 3</p>
		<span><p>Paragraf 4</p></span>
	</div>
		<p>Paragraf 5</p>
		<p>Paragraf 6</p>
</body>
</html>








Semisal kita simpan dengan nama General_sibling_selector.html, lalu kita buka di browser maka hasilnya adalah









Keterangan :





  • Paragraf 5 dan 6 mendapatkan warna salmon (merah muda) karena paragraf 5 dan 6 berada setelah tag <div> jadi mendapatkan effect dari general sibling selector.




Jadi CSS sendiri telah menyediakan beberapa fitur yang bisa digunakan untuk mengkombinasikan beberapa selector sekaligus, jika ada yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu pembahasan mengenai kombinasi selector CSS, sampai jumpa di tutorial CSS Selanjutnya.


Tags:

Post a Comment (0)

Lebih baru Lebih lama