Selector-selector dalam CSS

Dengan CSS selector kita akan menentukan suatu style tertentu kepada elemen-elemen
dengan pola yang kita inginkan. Selector-selector dalam CSS antara lain
1. Universal selector
Universal selector ditandai dengan *
Misal
*
{
font-family:Verdana;
}
Dengan selector ini berarti huruf default font untuk seluruh document XHTML kita
adalah Verdana
2. Descendant selector
Selector descendant berarti selector yang merupakan turunan dari sesuatu.
div p
{
margin-bottom: 2px;
}
Berarti setiap <p> yang merupakan turunan dari <div> akan diberi margin-bottom
2px. Turunan ini bisa anak, atau cucu atau cicit dan seterusnya yang penting
merupakan turunan dari <div>
3. Direct child selector
Direct child selector berarti turunan secara langsung atau anak.
div > p
{
margin-bottom: 2px;
}
Dalam contoh ini, hanya <p> yang merupakan anak (turunan langsung) dari div yang
akan diberikan margin-bottom 2px
4. Direct Adjacent Sibling Combinator
Selector ini adalah untuk dua anak berdekatan yang memiliki parent yang sama
misalnya:
h1 + p
{
font-family:Arial;
}
Pada selector di atas akan berlaku untuk contoh
<div>
<h1>Judul</h1>
<p>Penjelasan</p>
</div>
Pada contoh di atas Penjelasan akan menggunakan font Arial
5. Indirect Adjacent Sibling Combinator
Untuk indirect Adjacent Sibling ini adalah seperti Direct Adjacent Sibling tetapi
letaknya tidak harus berdekatan. Jadi dua buah anak memiliki parent yang sama
meskipun tidak berdekatan.

Selector ini adalah untuk dua anak yang memiliki parent yang sama misalnya:
h1 ~ h2
{
font-family:Arial;
}
Pada selector di atas akan berlaku untuk contoh
<div>
<h1>Judul</h1>
<p>Penjelasan</p>
<h2>Sub Judul</h2>
</div>
Pada contoh di atas Sub Judul akan menggunakan font Arial
6. Berdasarkan attribute
Untuk contoh based on attribute misalnya
input[type]
{
border: 1px;
}
7. Berdasarkan nilai suatu attribute
Contoh yang berdasarkan nilai suatu atrribut misalnya:
input[type='text']
{
border: 1px;
}
8. Substring selector
- Substring dengan permulaan tertentu,
misalnya
a[href^='http://www.proweb.co.id']
{
color: blue;
}
- Substring dengan akhiran tertentu.
a[href$='.jpeg']
{
color: blue;
}
- Substring dengan mengandung string tertentu di mana saja.
a[href*='proweb']
{
color: blue;
}
Kunjungi www.proweb.co.id untuk menambah wawasan anda.