Tutorial Belajar CSS Part 5 – Cara Penulisan Selector CSS

Posted on Posted in Tutorial CSS

Jika dalam tutorial sebelumnya kita telah belajar mengenai beberapa jenis dari selector CSS, seperti Universal Selector, Element Type Selector, Class Selector, ID Selector, dan Attribute Selector yang merupakan selector yang sering digunakan untuk memanipulasi tampilan kode html, nah dalam tutorial kali ini kita akan membahas mengenai bagaimana cara menggunakan beberapa selector secara bersamaan agar struktur html yang akan kita beri css bisa lebih spesifik.

Dalam tutorial sebelumnya memang kita telah belajar beberapa contoh dari penggunaan selector, tetapi hanya menggunakan satu selector saja, dalam contoh ini kita akan menggabungkan beberapa selector menjadi satu, baik langsung saja perhatikan contoh skrip HTML dibawah ini :

 

dalam skrip diatas telah ada skrip html, beberapa bagian dari struktur html tersebut akan kita beri skrip CSS dengan mode internal style,  baik kita akan buat beberapa contoh penggunaan dari selector css :

Tag h2 dan h3 menjadi warna biru

Anda bisa menuliskan selectornya satu persatu seperti berikut ini :

 

tetapi karena property dan value sama, sehingga anda bisa menuliskan seperti berikut ini :

 

 

Tag <strong> pada tag <p>

pada paragraf pertama, terdapat tag <strong> yang mengapit tulisan CSS, itu akan kita rubah ukuran fontnya menjadi 20px, maka skrip cssnya adalah seperti berikut ini :

 

selector yang kita tulis adalah tag selector p dan strong

 

 

 

Tag <em> pada tag <p>

pada paragraf pertama terdapat tag <em> kita akan merubah warna textnya menjadi merah, maka skrip cssnya adalah :

selector yang kita tulis adalah tag p dan em

 

 

 

Text dengan menggunakan ID warungbelajar pada tag <p>

pada paragraf kedua kita menggunakan attribute id dengan value warungbelajar kita akan merubah warnanya menjadi warna merah, maka skrip cssnya adalah :

selector yang kita gunakan adalah tag selector p dan id selector “warungbelajar”

 

 

 

Text dengan menggunakan class penjelas pada tag <p>

pada paragraf ketiga yang menggunakan class=”penjelas” kita akan merubah warnya menjadi warna hijau

selector yang kita gunakan adalah tag selector p dan class selector “penjelas”

 

 

 

Attribute [href] pada paragraf kedua

Kita akan merubah warna link, pada paragraf kedua, maka kita gunakan perpaduan attribute selector, id selector dan tag p, skrip cssnya sebagai berikut :

selectorny yang digunakan adalah tag selector p, id selector “warungbelajar” dan attribute selector [href],    jika anda hanya menggunakan attribute selector saja, seperti ini :

maka link yang berada di tag <h2> juga akan berubah, karena itu gunakan beberapa selector agar menjadi lebih spesifik untuk href yang akan kita rubah warnanya.

 

 

 

Table dengan ID daftar_html

kita akan merubah warna background pada tabel yang menggunakan id=”daftar_html”, maka skrip cssnya sebagai berikut :

selector yang kita gunakan adalah tag selector table dan id selector “daftar_html”.

Nah sudah ada beberapa contoh penggabungan selector css untuk merubah tag HTML, ini adalah keseluruhan kode HTML dan cssnya, untuk css kita menggunakan mode internal

 

semisal kita beri nama cara_penulisan_selector_css.html lalu kita buka di browser :

Bagimana mudah bukan cara menggabungkan beberapa selector CSS, dengan cara ini anda sudah bisa memilih struktur HTML mana yang ingin dirubah dengan lebih spesifik, baik sekian dulu yang dapat warung belajar bahas dalam tutorial cara penulisan selector CSS, sampai jumpa di tutorial CSS lainnya.

 

Leave a Reply

Your email address will not be published. Required fields are marked *