Pengelompokan pemilih di CSS

Dalam kode CSS banyak pemilih dengan gaya yang sama :

h1{
color:#222222;
}
h2{
color:#222222;
}
h3{
color:#222222;
}
h4{
color:#222222;
}

Agar lebih dinamis, seperti ini :

h1, h2, h3, h4{
color:#222222;
}


Secara khusus, dan secara luas.

h3{
background:yellow;
color:black;
}

Kalau lihat contoh diatas !, tag <h3> digunakan secara luas. Jika anda menggunakan kode CSS diatas, teks yang berada didalam tag <h3> pasti akan berwarna hitam, dan pastinya anda menempatkan tulisan yang berwarna hitam di background yang berwarna terang. Yang jadi pertanyaan, bagaimana saya bisa menggunakan tag <h3> secara bersamaan di background yang terang, dan di background yang gelap ?. Ini perlu pengkhususan, agar dapat menggunakan tag <h3> secara bersamaan dikedua background itu.


Silahkan kalau ingin ikut mencoba, buka Notepad dan copy-paste kode berikut :

<html>
<head>
<style type="text/css">
h3{
background:yellow;
color:black;
}
.contoh h3{
background:black;
color:white;
}
</style>
</head>

<body>
<h3>Contoh Tag h3 Background Terang</h3>

<div class="contoh">
<h3>Contoh Tag h3 Background Gelap</>
</div>
</body>
</html>

Save dengan ekstensi file .html atau .htm . Bisa menggunakan id atau class. Id agar valid, digunakan sekali. Dan class bisa anda gunakan berkali-kali. Pengkhususan pemilih, dapat anda kembangkan sesuka hati, semua kembali ke diri anda sendiri.


Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
Pengelompokan pemilih di CSS by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/pengelompokan-pemilih-di-css.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.