Cara Pemakaian Selector CSS

belajar HTML dan CSS untuk pemula

Pada tutorial CSS sebelumnya, kita sudah mengenal lima jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector itu tidak cuma berdiri sendiri, tetapi bisa digabung jadi sebuah selector yang lebih rinci.

CSS memungkinkan kita untuk menggabungkan beberapa jenis selector jadi sebuah selector gabungan, contohnya kita perlu selector untuk mencari seluruh tag <em> yang berapa di dalam tag <h1>, atau seluruh tag <h1> yang didalamnya ada tag <a> dengan class “judul”.

Supaya mudah memahami cara penggabungan selector CSS ini kita akan menyiapkan sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html

<!DOCTYPE html>
<html>
    <head>
    <title>Belajar CSS</title>

    <style type="text/css">
    </style>

</head>
<body>
  <h2 class="judul">Belajar CSS</h2>
    <p> Ini <strong>ialah</strong> sebuah <em>paragraf</em> </p>

    <p id="belajar_html" class="paragraf" >Saya sedang belajar HTML dari 
    <a href="http://www.infanthree.com" target="_blank">Infanthree</a>
    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 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 atas tag header (<h2>), paragraf(<p>), dan daftar (<ol>). Bila kamu belum memahami tag-tag HTML diatas, keseluruhan tag ini sudah kita bahas pada Tutorial Belajar HTML.

Perhatikan pula pada bagian <head> dari belajar_css.html itu saya juga menyediakan tag <style> yang sebentar lagi akan kita isi dengan CSS. Beberapa dari tag HTML yang ada pula sudah mempunyai atribut seperti “class” dan “id” yang siap di-“style” memakai CSS.

Tujuan pertama kita, ialah:

1. Membuat semua tag header <h2> berwarna biru

Sebab kita berkeinginan seluruh tag berwarna biru, maka tinggal memakai CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> di bagian head:

h2

Tujuan kedua ialah :

2. Membuat semua tag header <h3> juga berwarna biru

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

h2 
h3

Tetapi CSS mempunyai cara yang lebih efisien bila yang kita harapkan ialah style yang sama untuk kedua tag. Kita dapat menggabungkan kode CSS diatas jadi:

h2 , h3

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

h1 , h2, h3 , h4, h5 , h6

Tujuan ketiga :

3. Seluruh tag <strong> yang ada di dalam tag <p> berwarna merah

Bila yang kita maksud ialah seluruh tag <strong> dimana saja tag itu berada, maka kode CSSnya cukup sebagai berikut:

strong

Tetapi kode CSS itu akan membuat semua tag <strong> dimana saja, termasuk tag <strong> yang ada di dalam tag <h1> akan berwarna merah. Sehingga, bila ditambahkan syarat cuma untuk tag <strong>yang ada di dalam tag <p>, maka kita perlu menulis selector CSS jadi:

p strong

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

Untuk contoh extreme, katakan kita mempunyai halaman HTML yang cukup rumit, sehingga kita berkeinginan warna merah untuk “seluruh tag <i> yang ada di dalam tag <span>, dimana tag <span> itu harus berada di dalam tag <h2>”, maka kode CSSnya ialah:

h2 span i

Yang harus diingat dalam urutan ini merupakan: tag yang dikenai style cuma tag yang amat terakhir, dimana pada contoh diatas, cuma 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 jadi italic (huruf miring)

Prinsip dari penggabungan ini sama dengan maksud 1 hingga 3 sebelumnya, hanya saat ini kita perlu memakai class selector. Kode CSS untuk kebutuhan itu merupakan:

h2.judul , .paragraf

h2.judul dibutuhkan untuk mencari semua tag h2 dengan class judul, sedangkan .paragraf dipakai untuk mencari semua tag yang mempunyai class paragraf, apapun tag itu.

Sebagai tujuan terakhir dari tutorial cara pemakaian selector css ini:

5. Ubah ukuran text jadi 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, tetapi bila kamu sudah paham tujuan 1 hingga 4 sebelumnya, maka kode CSS berikut akan menjelaskannya:

#belajar_html, p#belajar_css, h3.subheader

Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita yaitu sebagai berikut

<!DOCTYPE html>
<html>
    <head>
    <title>Belajar CSS</title>
 
    <style type="text/css">
        h2 , h3
        p strong 
        h2.judul , .paragraf 
        #belajar_html, p#belajar_css, h3.subheader  
     </style>
</head>
<body>
  <h2 class="judul">Belajar CSS</h2>
    <p> Ini <strong>ialah</strong> sebuah <em>paragraf</em> </p>
 
    <p id="belajar_html" class="paragraf" >Saya sedang belajar HTML dari 
    <a href="http://www.infanthree.com" target="_blank">Infanthree</a>
    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 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 kamu telah dapat membaca maksud dari kebanyakan selector dalam CSS. Sebagai contoh, kamu pastinya tidak bingung membaca kode CSS berikut:

table#daftar_hadir, table#daftar_kuliah 

div.header, div.footer, div#main_menu

Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), contoh selector CSS yang kedua merupakan selector yang biasa dipakai untuk manipulasi tag div dalam merancang layout desain web, tunggu pembahasannya pada tutorial CSS lanjutan di infanthree.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat