cloud-hosting-terbaik-indonesia

Tutorial Belajar CSS Part 6: Cara Penggunaan Selector CSS

Posted on

Setelah membahas jenis-jenis selector di dalam CSS, pada panduan kali ini kita akan membahas Cara pemakaian selector CSS.


Cara Pemakaian Selector CSS

Di panduan CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik.

CSS memungkinkan kita bagi menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector bagi mencari seluruh tag <em> yang berapa di pada 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 bagi bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save selaku belajar_css.html

Halaman HTML diatas adalah sebuah halaman HTML sederhana yang terdiri dari tag header (<h2>), paragraf(<p>), dan list (<ol>). Kalau kamu belum memahami tag-tag HTML diatas, keseluruhan tag ini telah kita bahas di Tutorial Belajar HTML.

Perhatikan pun di bagian <head> dari belajar_css.html tersebut saya pun menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang terdapat pun telah mempunyai atribut seperti “class” dan “id” yang siap di-“style” menggunakan CSS.

Tujuan pertama-tama kita, ialah:

1. Membangun seluruh tag header <h2> berwarna biru

Karena kita menginginkan seluruh tag berwarna biru, karenanya tinggal menggunakan CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> di bagian head:

Tujuan kedua ialah :

2. Membangun seluruh tag header <h3> pun berwarna biru

Bagi kebutuhan ini, kita tinggal menambahkan kode CSS seperti contoh <h2> sebelumnya, selaku berikut:

Namun CSS mempunyai cara yang lebih efisien seandainya yang kita inginkan ialah style yang sama bagi kedua tag. Kita dapat menggabungkan kode CSS diatas menjadi:

Tanda koma (“,”) selaku pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru. Tak ada batasan seberapa banyak selector yang dapat digunakan. Katakan kita ingin seluruh tag header dari <h1> hingga <h6> bewarna biru, karenanya kode CSSnya ialah:

Tujuan ketiga :

3. Seluruh tag <strong> yang berada di pada tag <p> berwarna merah

Kalau yang kita maksud ialah seluruh tag <strong> dimanapun tag tersebut berada, karenanya kode CSSnya lumayan selaku berikut:

Namun kode CSS tersebut akan merancang seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di pada tag <h1> akan berwarna merah. Sehingga, seandainya ditambahkan syarat hanya bagi tag <strong>yang berada di pada tag <p>, karenanya kita mesti menulis selector CSS menjadi:

Maksud dari kode “p strong” ialah seluruh tag <strong> yang berada di pada tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong)

Bagi contoh extreme, katakan kita mempunyai halaman HTML yang lumayan rumit, sehingga kita menginginkan warna merah bagi “seluruh tag <i> yang berada di pada tag <span>, dimana tag <span> tersebut mesti berada di pada tag <h2>”, karenanya kode CSSnya ialah:

Yang perlu diingat pada urutan ini ialah: tag yang dikenai style hanya tag yang sangat terakhir, dimana pada contoh diatas, hanya tag <i> saja yang akan bewarna merah.

Melanjutkan pembahasan selector, bagi 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 mesti menggunakan class selector. Kode CSS bagi kebutuhan itu ialah:

h2.judul diperlukan bagi mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan bagi mencari seluruh tag yang mempunyai class paragraf, apapun tag tersebut.

Selaku tujuan terakhir dari panduan cara pemakaian selector css ini:

5. Ubah ukuran text menjadi 14pt bagi 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 seandainya kamu telah paham tujuan 1 hingga dengan 4 sebelumnya, karenanya kode CSS berikut akan menjelaskannya:

Selaku penutup, hasil ahir dari halaman HTML belajar_css.html kita ialah selaku berikut< /p>

Hingga disini setidaknya kamu telah dapat membaca maksud dari beberapa besar selector pada CSS. Selaku contoh, kamu pastinya tak bingung membaca kode CSS berikut:

Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), contoh selector CSS yang kedua adalah sebuah selector yang sering digunakan bagi manipulasi tag div pada mendesain layout desain web, nantikan pembahasannya di panduan CSS lanjutan di Source Code Program.

Melanjutkan pembahasan mengenai panduan CSS, pada panduan belajar CSS berikutnya, kita akan mempelajari Urutan Prioritas Selector pada CSS atau dikenal dengan istilah Cascading.


eBook CSS Uncover Duniailkom

Kalau kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/