Belajar CSS (19. Combinator)

Akhi Syabab

pada kesempatan kali ini kita akan belajar tentang combinator.
Diskripsi : combinator adalah pengaturan penjelaan yang berhubungan dengan selector. Untuk mengartikan memang sedikit sulit tapi nanti akan paham jika mengetahui kode nya.

Jenis-jenis combinator yaitu ada 4,
1. menggunakan spasi
2. menggunakan >
3. menggunakan +
4. menggunakan ~

1. Menggunakan spasi(Descendant)
Menuliskan menggunakan spasi yaitu cara mengatur keturunan yang ada didalam suatu tag. misal kita hanya akan mengatur tag p yang berada di dalam tag div
ex 

<!DOCTYPE html>
<html>
<head>
	<style>
		div p {
		    background-color: yellow;
		}
	</style>
</head>
<body>
	<div>
	  <p>Paragraph 1 in the div.</p>
	  <p>Paragraph 2 in the div.</p>
	  <span><p>Paragraph 3 in the div.</p></span>
	</div>

	<p>Paragraph 4. Not in a div.</p>
	<p>Paragraph 5. Not in a div.</p>
</body>
</html>

hasil

2. menggunakan > (child)
menuliskan untuk mengatur hanya kepada anak suatu tag.

<!DOCTYPE html>
<html>
<head>
	<style>
		div > p {
		    background-color: yellow;
		}
	</style>
</head>
<body>

	<div>
	  <p>Paragraph 1 in the div.</p>
	  <p>Paragraph 2 in the div.</p>
	  <span><p>Paragraph 3 in the div.</p></span>
	</div>

	<p>Paragraph 4. Not in a div.</p>
	<p>Paragraph 5. Not in a div.</p>

</body>
</html>

hasil

berbeda dengan Descendant, pada child , tag p didalam span tidak ada efek karena bukan merupakan anak dari tag div tapi anak dari tag span

3. menggunakan + (adjacent sibling)
untuk penulisan menggunakan + , yaitu mengatur selector yang berdekatan setelahnya, misal kita akan mengatur tag p yang berada setelah tag div

<!DOCTYPE html>
<html>
<head>
	<style>
		div + p {
		    background-color: yellow;
		}
	</style>
</head>
<body>

	<div>
	  <p>Paragraph 1 in the div.</p>
	  <p>Paragraph 2 in the div.</p>
	</div>

	<p>Paragraph 3. Not in a div.</p>
	<p>Paragraph 4. Not in a div.</p>

</body>
</html>

hasil

4. menggunakan ~ (general sibling)
yaitu cara menuliskan code untuk mengatur saudara dari suatu selector. misal kita akan mengatur tag p yang bersaudara dengan tag div

<!DOCTYPE html>
<html>
<head>
	<style>
		div ~ p {
		    background-color: yellow;
		}
	</style>
</head>
<body>
	<div>
	  <p>Paragraph 1 in the div.</p>
	  <p>Paragraph 2 in the div.</p>
	</div>

	<p>Paragraph 3. Not in a div.</p>
	<p>Paragraph 4. Not in a div.</p>

</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.