Sebelumnya, kita sudah membahas macam-macam selector CSS. Sekarang yang akan kita bahas adalah cara penggunaan selector CSS tersebut. Simak pembahasan AneIqbal selengkapnya berikut ini.
Ada 5 jenis selector yang sudah kita bahas sebelumnya, yakni: universal selector, element type selector, class selector, id selector, dan atribute selector.
Selector nggak cuma berdiri sendiri, kita bisa mengombinasikan jenis-jenis selector di atas agar lebih spesifik lagi elemen HTMLnya yang ingin diubah tampilannya.
Kita akan bagi jadi beberapa kombinasi supaya kita lebih familiar dan lebih paham lagi dengan kode CSS.
Kombinasi beberapa tag HTML dengan style yang sama
Misalnya, kita ingin heading, paragraf, dan link, teksnya berwarna merah dan ada garis dibawahnya (underline).. kode CSSnya seperti ini:
h1 {
color: red;
text-decoration: underline;
}
p {
color: red;
text-decoration: underline;
}
a {
color: red;
text-decoration: underline;
}
Ketiga tag HTML tersebut punya style yang sama. Kode CSS di atas kurang efisien. Kita bisa menuliskannya seperti ini:
h1, p, a {
color: red;
text-decoration: underline;
}
Lebih enak kode yang atas atau bawah? enak yang bawah toh?
Hasilnya pun sama saja, tapi lebih efisien dan lebih pendek.
Jika ada beberapa tag HTML yang punya style yang sama, kita bisa memisahkan selectornya dengan tanda koma (,) seperti kode di atas.
Mengubah style tag di dalam tag HTML
Misalnya, ada kode HTML seperti ini.
<p> <i>Ini akan berubah menjadi teks miring..</i> </p> <p> <b>Ini akan berubah menjadi cetak tebal..</b> </p>
Jika kita jalankan dengan web browser, kedua paragraf di atas, baik yang miring maupun yang bercetak tebal akan memiliki ukuran huruf yang sama.
Lalu, gimana caranya agar teks yang miring punya ukuran huruf yang lebih besar, padahal keduanya ada di dalam tag yang sama (tag <p>)?
Caranya adalah dengan mengikutkan tag pertama dan tag setelahnya di selector CSS. Seperti ini jadinya:
p i {
font-size: 30px;
}
Maka, paragraf yang bercetak miring akan memiliki ukuran font sebesar 30 pixel.
Kalo yang bercetak tebal kita besarkan juga ukurannya jadi lebih besar dari yang miring? Bisa, caranya sama.
p b {
font-size: 40px;
}
Nggak ada batasan berapa “kedalaman” tag HTML yang ingin diubah tampilannya. Contoh di atas hanya sampai pada 2 kedalaman tag.
..kalo 3 dan seterusnya? tinggal tambahkan saja.
Ingat, untuk mengubah tampilan tag di dalam tag HTML, nggak ada tanda koma di antara selectornya, hanya dipisahkan spasi.
Mengubah style dari class
Mengubah style dari atribute class suatu tag HTML adalah dengan menjadikan nama class itu sebagai selectornya, plus tanda titik (.) di depannya, contoh:
<p class="hitam-putih">Teks ini akan memiliki warna teks putih dengan background hitam..</p>
Maka, kode CSSnya adalah:
.hitam-putih {
color: white;
background: black;
}
Contoh lagi, ada 2 tag HTML berbeda, yakni tag <h1> dan <h2>, dimana punya class yang sama tapi kita hanya ingin h1 bergaris bawah (underline).
<h1 class="hitam">Ini berubah hitam backgroundnya</h1> <h2 class="hitam">Ini nggak berubah hitam backgroundnya</h2>
Maka, kode CSSnya adalah:
h1.hitam {
background: black;
}
Dengan begitu, meskipun h1 dan h2 punya class yang sama, hanya h1 saja yang akan berubah karena selectornya lebih spesifik ke class h1.
Mengubah style dari id
Caranya hampir sama dengan class, bedanya.. class dengan tanda titik (.) sedangkan id dengan tanda pagar (#).
Contohnya, kita ingin mengubah teks h3 menjadi berwarna hijau:
<h3 id="hijau">Ini akan berwarna hijau</h3>
Maka kode CSSnya:
#hijau {
color: green;
}
Kombinasi dari semuanya
Kita pun dapat mengombinasikan semua cara-cara di atas menjadi 1 selector jika memang ingin diberi style yang sama.
Kita akan coba buat beberapa tag HTML yang memiliki ukuran font yang sama yakni 20 pixel.
Langsung kita praktikkan.
Buat file HTML dulu, simpan dengan nama penggunaan-selectors.html, kodenya:
<!DOCTPYE html>
<html>
<head>
<title>Cara penggunaan selector CSS</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%40import%20url(penggunaan-selectors.css)%3B%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<h1>
<b>
<i>Ini akan menjadi teks tebal dan miring.. ukurannya jadi 20px</i>
</b>
</h1>
<h1>
<b>Ini akan menjadi teks tebal dan nggak miring.. ukurannya nggak berubah jadi 20px</b>
</h1>
<p class="teks">Teks ini nggak akan menjadi 20px</p>
<p class="teks"><b>Teks ini akan menjadi 20px</b></p>
<a href="#" id="uhuy">Teks ini akan menjadi 20px</a>
<body>
</html>
Kode CSSnya kita simpan dengan nama penggunaan-selectors.css.
h1 b i, p.teks b, #uhuy {
font-size: 20px;
}
Hasilnya seperti ini:
Itulah pembahasan kita kali ini tentang cara penggunaan selector CSS. Gimana? Sudah paham kan?
..jadi sudah lebih familiar kan dengan kode CSS?
Saat mendesain tampilan web, disinilah kita akan banyak menghabiskan waktu. dengan berbagai kombinasi selector kita akan dapat mendesain tampilan web yang bagus.
Next kita akan bahas prioritas CSS.
