featured

Sibling Selectors

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

pada kali ini saya akan menjelaskan sibling selector. bagi yang baru tau apa itu sibling selector mari kita belajar bareng-bareng saya juga masih belajar..:), ok langsung aja

  • Penjelasan

Sibling selector adalah selector yang dikhususkan untuk memilih pada selector yang sama, konsepnya tidak jauh berdeda dengan selector pseudo atau child. yang  belum tahu nanti kita bahas tetang itu, karena sekarang saya ingin menulis tentang sibling selector hehe..

pada umumnya sibling selector memiliki aturan sintax seperti berikut

.sibling + .sibling{
		color:#ff0000;
		margin-bottom: 20px;
	}

selector di atas bisa diartikan class sibling yang sebelumnya ada class sibling, biasa saya membacanya seperti itu.
berikut saya demokan code untuk selectors sibling.

<html>
<head>
	<title>Sibling</title>
	<style type="text/css">
	body{
		text-align: center;
	}
	.box{
		width: 600px;
		margin: 0px auto;
		padding: 4px;
		margin-top: 50px;
		margin-bottom: 20px;
		border:1px solid #ccc;
	}
	

	.sibling + .sibling{
		color:#ff0000;
		margin-bottom: 20px;
	}
	</style>
</head>
<body>
	<h2>css sibling</h2>
	<div class="box">
		<div class="sibling">box1 lorem ipsum dolor sit amet</div>
		<div class="sibling">box2 lorem ipsum dolor sit amet</div>
		<div class="sibling">box3 lorem ipsum dolor sit amet</div>
		<div class="sibling">box4 lorem ipsum dolor sit amet</div>
	</div>
</body>
</html>

class sibling yang terletak paling atas tidak terkena style dikarenakan class sibling paling atas tidak memiliki class sibling yang sebelumnya.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.