Mempelajari Selector Pada Pemrograman CSS - Part 1


Halo Sobat Lautan, semoga sehat selalu ya
Kali ini kita akan membahas tentang selektor pada pemrograman CSS. 

Univesal Selector

Selektor dalam CSS terdiri dari dua bagian besar,  yakni umum dan khusus. Penulisan selektor untuk bagian yang umum, sering dituliskan dengan lambang *. Sama halnya, ketika anda menuliskan bintang pada query, maka perintah tersebut mencakupi semua komponan yang ada. Select * From nama_tabel where nama_field = 'nilai'; atau SELECT * FROM customers WHERE nama <> 'Alexander';

Perintah yang melibatkan lambang bintang di SQL, dapat dikombinasikan dengan operator kondisi, seperti halnya WHERE yang berguna untuk spesifikasi lebih, dari bagian manakah yang akan dipilih oleh user dari tabel yang telah ditentukan untuk kemudian ditampilkan.
Berbeda dengan SQL, bintang pada CSS, sudah mencakupi keseluruhan daripada tag, dan tidak bisa lagi ditambah dengn operator kondisi, layaknya where, karena pada dasarnya, CSS hanya memiliki 3 komponen, untuk dituliskan selektor, atribut, dan value.

Agar lebih memahaminya, cobalah skrip dibawah ini..

<html>
<head>
     <title>www.lautan-it.com</title>
<style>
     * {
            background-color: black;
            color : white;
      }
     span {
            background-color:none;
            color: black; 
     }
</style>
</head>
<body>
          <h4>www.lautan-it.com</h4>
           <p>Berdiri sejak tahun 2017, lautan-it.com adalah website buatan Mahasiswa                       Yogyakarta, Sistem Informasi, dan akan berkomitmen untuk terus                                     membagikan ilmu-ilmu seputar dunia IT
           </p>
           <p> Always Update </p> 
            <ol>
                   <span><li a href="#">kunjungi Lautan-IT</li></span>
                   <li a href="#">kunjungi Lautan-IT</li>
            </ol>
</body>
</html>

Terlihat, bahwa tag * memiliki kekuatan selektor yang begitu kuat. Saking kuatnya, selektor ini jarang digunakan oleh para programmer. Sekedar mengetahuinya saja sudah cukup

Tag Selector


Tag selektor, adalah selektor yang dipilih berdasarkan nama tag. Seperti saat anda ingin memberikan efek khusus hanya pada tag P, maka yang dipanggil adalah tag P. 
Untuk mengetahuinya, anda dapat mengedit bagian dari skrip diatas tepatnya pada bagian style dengan contoh skrip style dibawah ini

<style>
    h4 {
           background-color: black;
           color: white;     
    }
    p {
           background-color: green;
           color: black;
    }
</style>

Class Dan ID Selector

Tiba saatnya kita sampai pada bagian terakhir, yaitu Class dan ID. 2 selektor yang sering digunakan ketika awal mula belajar pemrograman CSS. Karena, dengan 2 selektor ini, anda dapat memillih tag yang khusus, yang telah anda tandai dengan nilai tertentu

Contohnya saja, anda ingin tag P yang bertuliskan Always Update diatas berwarna merah. Anda pastinya tidak mungkin menuliskan hanya selektor P saja pada CSSnya bukan ?
Nah, disini kita akan memberikan tanda nilai "Koding". 

Untuk class selektor, bagian penulisan pada css, menggunakan tanda . (titik), lalu berilah nama tanda, dan untuk bagian pada tag yang dipilih, konfirmasikan nama tanda tersebut (menuliskannya) dengan sebelumnya menambahkan atribut class pada tag tersebut.

Bingung ?

Agar lebih mudah, ganti skrip pada tag style diatas, menjadi seperti dibawah ini;

<html>
<head>
     <title>www.lautan-it.com</title>
<style>
     .koding {
         color : red
     }
     p {
         background-color : black;         
         color : white
     }
</style>
</head>
<body>
          <h4>www.lautan-it.com</h4>
           <p>Berdiri sejak tahun 2017, lautan-it.com adalah website buatan Mahasiswa                       Yogyakarta, Sistem Informasi, dan akan berkomitmen untuk terus                                     membagikan ilmu-ilmu seputar dunia IT
           </p>
           <p class="koding"> Always Update </p> 
            <ol>
                   <span><li a href="#">kunjungi Lautan-IT</li></span>
                   <li a href="#">kunjungi Lautan-IT</li>
            </ol>
</body>
</html>

Untuk ID selector, pemanggilnya ditandai dengan tanda #, dan yang dipanggil diberikan atribut id


<html>
<head>
     <title>www.lautan-it.com</title>
<style>
     #koding {
         color : red
     }
     p {
         background-color : black;         
         color : white
     }
</style>
</head>
<body>
          <h4>www.lautan-it.com</h4>
           <p>Berdiri sejak tahun 2017, lautan-it.com adalah website buatan Mahasiswa                       Yogyakarta, Sistem Informasi, dan akan berkomitmen untuk terus                                     membagikan ilmu-ilmu seputar dunia IT
           </p>
           <p id="koding"> Always Update </p> 
            <ol>
                   <span><li a href="#">kunjungi Lautan-IT</li></span>
                   <li a href="#">kunjungi Lautan-IT</li>
            </ol>

Bagaimana sudah mengerti bukan ?, Ya, tertarik untuk mencoba berbagai eksperimen. Lakukan saja dan giatlah dalam belajar :D

Post a Comment

4 Comments

  1. mantap mas artikelnya

    ReplyDelete
    Replies
    1. Makasih gan. Terima Kasih Telah berkunjung :D

      Delete
  2. Sangat berguna buat utak atik tampilan blog ini bro..
    nice inpoh

    ReplyDelete
    Replies
    1. Terima Kasih mas. Yo'i, apalagi untuk utak atik di bagian tema..Terima kasih telah berkunjung :D

      Delete