06 - Cara Penggunaan Selector Css
Cara Penggunaan Selector CSS
Pada tutorial CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya bangun sendiri, namun sanggup digabung menjadi sebuah selector yang lebih spesifik.
CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, contohnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.
Agar gampang memahami cara penggabungan selector CSS ini kita akan mempersiapkan sebuah halaman HTML dummy untuk materi pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html><html> <head> <title>Belajar CSS</title> <style type="text/css"> </style></head><body> <h2 class="judul">Belajar CSS</h2> <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p> <p id="belajar_html" class="paragraf" >Saya sedang berguru HTML dari akan terbuka pada tab baru</p> <p id="belajar_css" class="paragraf"> Saya sedang berguru CSS, mohon jangan diganggu</p> <br /> <h3 class="judul subheader">Daftar Belanjaan</h3> <ol> <li><em>Minyak Goreng</em></li> <li>Sabun Mandi</li> <li>Deterjen</li> <li>Shampoo</li> <li>Obat Nyamuk</li> </ol> </body></html> |
Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (<h2>), paragraf(<p>), dan list (<ol>). Jika anda belum memahami tag-tag HTML diatas, keseluruhan tag ini telah kita bahas pada Tutorial Belajar HTML.
Perhatikan juga pada bab <head> dari belajar_css.html tersebut aku juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada juga telah mempunyai atribut menyerupai “class” dan “id” yang siap di-“style” memakai CSS.
Tujuan pertama kita, adalah:
1. Membuat seluruh tag header <h2> berwarna biru
Karena kita menginginkan seluruh tag berwarna biru, maka tinggal memakai CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bab head:
1 2 3 | h2 { color: blue; } |
Tujuan kedua yaitu :
2. Membuat seluruh tag header <h3> juga berwarna biru
Untuk keperluan ini, kita tinggal menambahkan kode CSS menyerupai pola <h2> sebelumnya, sebagai berikut:
1 2 3 4 5 6 | h2 { color: blue; }h3 { color: blue; } |
Namun CSS mempunyai cara yang lebih efisien jikalau yang kita inginkan yaitu style yang sama untuk kedua tag. Kita sanggup menggabungkan kode CSS diatas menjadi:
1 2 3 | h2 , h3 { color: blue; } |
Tanda koma (“,”) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru. Tidak ada batasan seberapa banyak selector yang sanggup digunakan. Katakan kita ingin seluruh tag header dari <h1> hingga <h6> bewarna biru, maka kode CSSnya adalah:
1 2 3 | h1 , h2, h3 , h4, h5 , h6{ color: blue; } |
Tujuan ketiga :
3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah
Jika yang kita maksud yaitu seluruh tag <strong> dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:
1 2 3 | strong { color:red; } |
Namun kode CSS tersebut akan menciptakan seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, jikalau ditambahkan syarat hanya untuk tag <strong>yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:
1 2 3 | p strong { color:red; } |
Maksud dari kode “p strong” yaitu seluruh tag <strong> yang berada di dalam tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong)
Untuk pola extreme, katakan kita mempunyai halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk “seluruh tag <i> yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>”, maka kode CSSnya adalah:
1 2 3 | h2 span i { color:red; } |
Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam pola diatas, hanya tag <i> saja yang akan bewarna merah.
Melanjutkan pembahasan selector, untuk ujuan keempat kita:
4. Seluruh tag <h2> yang mempunyai class judul, dan seluruh tag yang mempunyai class paragraf menjadi italic (huruf miring)
Prinsip dari penggabungan ini sama dengan tujuan 1 hingga 3 sebelumnya, cuma kali ini kita harus memakai class selector. Kode CSS untuk keperluan itu adalah:
1 2 3 | h2.judul , .paragraf { font-style: italic; } |
h2.judul diharapkan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf dipakai untuk mencari seluruh tag yang mempunyai class paragraf, apapun tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
5. Ubah ukuran text menjadi 14pt untuk tag yang mempunyai id “belajar_html”, tag p dengan id “belajar_css” dan seluruh tag h3 yang mempunyai class “subheader”
Tujuan diatas terkesan rumit, namun jikalau anda telah paham tujuan 1 hingga dengan 4 sebelumnya, maka kode CSS berikut akan menjelaskannya:
1 2 3 | #belajar_html, p#belajar_css, h3.subheader { font-size:14pt; } |
Sebagai penutup, hasil final dari halaman HTML belajar_css.html kita yaitu sebagai berikut
<head> <title>Belajar CSS</title> <style type="text/css"> h2 , h3{ color: blue; } p strong { color:red; } h2.judul , .paragraf { font-style: italic; } #belajar_html, p#belajar_css, h3.subheader { font-size:14pt; } </style></head><body> <h2 class="judul">Belajar CSS</h2> <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p> <p id="belajar_html" class="paragraf" >Saya sedang berguru HTML dari <a href="http://www.duniailkom.com" target="_blank">Duniailkom</a> akan terbuka pada tab baru</p> <p id="belajar_css" class="paragraf"> Saya sedang berguru CSS, mohon jangan diganggu</p> <br /> <h3 class="judul subheader">Daftar Belanjaan</h3> <ol> <li><em>Minyak Goreng</em></li> <li>Sabun Mandi</li> <li>Deterjen</li> <li>Shampoo</li> <li>Obat Nyamuk</li> </ol> </body></html> Sampai disini setidaknya anda sudah sanggup membaca maksud dari sebagian besar selector dalam CSS. Sebagai contoh, anda tentunya tidak resah membaca kode CSS berikut:
1 2 3 4 5 6 7 | table#daftar_hadir, table#daftar_kuliah { font-size:14pt; }div.header, div.footer, div#main_menu { width:960px; } |
Terlepas dari maksud property CSS menyerupai font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), pola selector CSS yang kedua merupakan selector yang sering dipakai untuk manipulasi tag div dalam merancang layout desain web, nantikan pembahasannya pada tutorial CSS lanjutan di duniailkom.
Melanjutkan pembahasan mengenai tutorial CSS, dalam tutorial berguru CSS berikutnya, kita akan mempelajari Urutan Prioritas Selector pada CSS atau dikenal dengan Istilah Cascading.
Dosen Desain Web | Muqorobin, S.Kom
