Descendant selector CSS

Descendant selector didalam pemrograman CSS Adalah selector yang bisa diatur secara khusus untuk sebuah ID atau CLASS (parent class atau parent ID) yang dibuat webmaster dalam pendefinisian suatu elemen.
Beberapa contoh selector yang bisa diatur sebagai Descendant selector;

  • p (paragraf)
  • h1,h2,h3,h4,h5,h6 (headjng)
  • ul li (list)
  • img (gambar)
  • .widget (hanya pada widget,biasanya untuk template blogspot)
  • a (link)

Contoh pencodean HTML nya;

<div id="contoh">
<H1>Contoh heading H1</H1>
<p> Contoh paragraf</p>
<img src="http://contoh-url-gambar/image.jpg" />
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div> <!-- End contoh -->

Bagaimana mengatur CSS untuk setiap selector diatas yaitu sebagai descendant dari ID contoh?..

Hanya cukup menambahkan didepannya ID yang bertindak sebagai parent.
Misalnya;

#contoh p{font-family: verdana
}

#contoh H1{font-family: verdana
}

#contoh H2{font-family: arial;
font-size: 17px
}

#contoh img{padding: 3px;
margin: 5px;
}

#contoh ul li{list-style: squre;

}
#contoh a{font-family: georgia;
text-decoration: underline;
color: red;
}


Oya,,,,bagaimana kalau CSS untuk manipulasi widget blogspot?..
Ilustrasinya kita memberikan border pada widget,jadi tiap widget akan memiliki garis tepi sendiri sendiri.

Misalnya CLASS nya adalah "sidebar",contoh code CSSnya;

.sidebar li{list-style: disc;
}
.sidebar a{color: red;
}
.sidebar a:hover, #sidebar a:visited{color: green;
}

.sidebar .widget{border: 1px solid #ccc;
background: #F1F1F1;
padding: 5px;
margin: 10px;
}

Nah begitulah cara memberikan manipulasi pada tiap descendant selector yang ada.

Untuk memudahkan pemahaman,baca dulu mulai dari Apa itu CSS
Label: