Contoh Cara Penggunaan Selector Dalam CSS

Kuy Belajar - Contoh Cara Penggunaan Selector Dalam CSS. Assalamualaikum sobat semua. Alhamdulillah kita ketemu lagi di blog kuy-belajar, sebelumnya kita sudah membahas materi pertama kita tentang Mengenal Jenis-jenis Selector Dalam CSS kita akan menyambung pembahasan tersebut yaitu dengan materi Contoh Cara Penggunaan Selector Dalam CSS. Sobat sudah penasaran kan? kuy simak pembahasan berikut ini!

Contoh Penggunaan Selector dalam CSS

Pada artikel sebelumnya kita sudah membahas 5 jenis selector dalam CSS. yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut selain bisa berdiri sendiri, namun dapat juga digabungkan menjadi sebuah selector yang lebih spesifik lagi.

Karena CSS sendiri memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag <p>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.

Supaya kita lebih memahaminya, lebih baik langsung kita praktikkan saja, silahkan sobat sebuah file HTML dan masukkan skrip di bawah ini.

<html>
    <head>
    <title>Kuy Belajar CSS</title>
 
    <style type="text/css">
    </style>
 
</head>
<body>
  <h1 class="judul">Kuy Belajar CSS</h1>
    <p> Ini <strong>merupakan</strong> sebuah <em>paragraf</em> </p>
 
    <p id="belajar_html" class="paragraf" >kita sedang belajar HTML bersama-sama di
    <b><a href="http://kuy-belajar.blogspot.com/" target="_blank">Kuy-Belajar</a></b>
    dan akan terbuka pada tab baru</p>
 
    <p id="belajar_css" class="paragraf"> 
    Saya sedang belajar CSS, mohon jangan diganggu</p>
 
    <br />
 
    <h3 class="judul subheader">Daftar Materi</h3>
    <ol>
          <li><em>Mengenal CSS</em></li>
          <li>Fungsi CSS</li>
          <li>Mengenal macam-macam selector</li>
          <li>Mengenal fungsi dari selector</li>
          <li>Contoh penggunaan selectork</li>
    </ol>
 </body>
</html>

Ketika sobat menjalan kan skrip di atas, maka hasilnya akan seperti pada gambar di bawah ini.

Halaman website adalah contoh halaman website yang sederhana, yang kita buat menggunakan beberapa tag dari HTML seperti tag header (<h1>), paragraf(<p>), dan list (<ol>). Tag-tag tersebut sudah pernah kita bahas pada materi-materi HTML sebelumnya, jika sobat masih belum paham, silahkan sobat baca-baca kembali materi tersebut.

Jika kita perhatikan pada bagian tag <head> pada kode di atas, kita juga telah memasukkan tag <style> yang selanjutnya akan kita masukkan dengan kode CSS. Dan beberapa dari tag HTML yang telah kita buat juga sudah memiliki atribut seperti “class” dan “id” yang siap kita “style” menggunakan CSS.

Yang akan kita lakukan adalah:

1. Membuat seluruh tag header <h1> berwarna merah muda

Dikarenakan kita akan mengubah warna seluruh tag h1 menjadi berwarna merah muda, maka kita akan menggunakan CSS tag selector. Cara nya pun cukup mudah, silahkan sobat masukkan kode CSS berikut ini ke dalam tag <style> dan </style> yang sebelumnya sudah kita buat pula.

h1 {
   color: #F62459;
   }

2. Membuat seluruh tag header <h3> berwarna merah muda juga

Sama seperti pada tag h1 pada tag h3 ini pun kita cukup memasukkan kode CSS ke dalam tag <style> dan </style> yang telah kita buat. Silahkan sobat masukkan kode CSS berikut ini.

h1 {
   color: #F62459;
   }
h3 {
   color: #F62459;
   }

Sebenarnya cara penulisan di atas itu kurang efisien, karena kita harus menuliskan perintah yang sama sebanyak dua kali, kita bisa menggunakan cara penulisan yang lain agar kita tidak membuang-buang ukuran dari css yang kita buat karena terlalu banyaknya penulisan perintah yang sama.

Kuy simak contoh di bawah ini.

h1 , h3 {
        color: #F62459;
        }

Dari kode di atas akan terlihat lebih singkat daripada kode yang sebelumnya, penggunaan tanda koma (“,”) sebagai pemisah yaitu memberi tahu kepada browser bahwa kedua tag ini memiliki perintah yang sama, yaitu akan berwarna merah muda.

Tidak ada batasan seberapa banyak selector yang bisa digunakan. Seandainya kita ingin seluruh tag header dari <h1> sampai <h6> bewarna merah muda, maka kita cukup menuliskan seperti pada contoh berikut ini.

h1 , h2, h3 , h4, h5 , h6{
    color: #F62459;    }

3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna biru

Karena yang kita maksudkan adalah seluruh tag <strong>, dimanapun tag tersebut berada akan tetap mengikuti perintah CSS yang akan kita buat, maka kode CSSnya cukup sebagai berikut:

strong {
       color:#446CB3;
       }

Dengan kode CSS tersebut, akan membuat seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna biru. Namun jika kita ingin memberikan perintah yang lebih spesifik kepada tag <strong>, misalkan kita hanya ingin merubah warna tag <strong> yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:

p strong {
     color:#446CB3;
     }

Maksud dari kode “p strong” adalah 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)

4. Seluruh tag <h1> yang memiliki class judul, dan seluruh tag yang memiliki class paragraf menjadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:

h1.judul , .paragraf {
      font-style: italic;
      }

h1.judul digunakan untuk mencari seluruh tag h1 dengan class judul, sedangkan .paragraf digunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.

5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p dengan id “belajar_css” dan seluruh tag h3 yang memiliki class “subheader”

Untuk yang terakhir ini memang terkesan agak lebih rumit dibanding dengan yang kita buat sebelumnya, namun jika sobat sudah memahami tujuan dari 1 sampai 4, maka pasti akan lebih mudah memahaminya. Berikut ini adalah contohnya :

#belajar_html, p #belajar_css, h3 .subheader {
       font-size:14pt;
       }

Menggabungkan semuanya di dalam CSS

Sebagai tahap akhir dari pembelajaran kali ini, kita akan menggabungkan semua bagian-bagian yang kita telah buat tersebut kedalam tag <style> dan </style>. Kuy simak contoh berikut ini.

<html>
    <head>
    <title>Kuy Belajar CSS</title>
 
    <style type="text/css">

h1 , h3 {
        color: #F62459;
        }

p strong {
     color:#446CB3;
     }

h1.judul , .paragraf {
      font-style: italic;
      }

#belajar_html, p #belajar_css, h3 .subheader {
       font-size:14pt;
       }
    </style>
 
</head>
<body>
  <h1 class="judul">Kuy Belajar CSS</h1>
    <p> Ini <strong>merupakan</strong> sebuah <em>paragraf</em> </p>
 
    <p id="belajar_html" class="paragraf" >kita sedang belajar HTML bersama-sama di
    <b><a href="http://kuy-belajar.blogspot.com/" target="_blank">Kuy-Belajar</a></b>
    dan akan terbuka pada tab baru</p>
 
    <p id="belajar_css" class="paragraf"> 
    Saya sedang belajar CSS, mohon jangan diganggu</p>
 
    <br />
 
    <h3 class="judul subheader">Daftar Materi</h3>
    <ol>
          <li><em>Mengenal CSS</em></li>
          <li>Fungsi CSS</li>
          <li>Mengenal macam-macam selector</li>
          <li>Mengenal fungsi dari selector</li>
          <li>Contoh penggunaan selectork</li>
    </ol>
 </body>
</html>

Maka akan menghasilkan seperti pada gambar berikut ini.

Jika kita bandingkan dengan gambar yang sebelumnya, pada gambar ini terlihat terjadi beberapa perubahan yang signifikan, seperti format penulisan dan warna tulisan yang telah berubah.

Saya rasa itu lah pembahasan kita tentang Contoh Cara Penggunaan Selector Dalam CSS. kita sudah mempelajari fungsi berserta contoh nya masing-masing.

Sekian dulu dari saya "Singkat, Semoga Bermanfaat"

Keep Coding ya sobat!

Kuy ke materi selanjutnya : Mengenal Urutan Prioritas Selector di CSS