Mempelajari Selector Pada Pemrograman CSS - Part 3


Halo Sobat Lautan, semoga sehat selalu ya.
Yak perlu dijelaskan lagi, apa itu CSS ya :D.
Kali ini, kita akan kembali mempelajari tentang selector. Bila pada pertemuan sebelumnya, kita telah menyinggung hanya 1 selector, yakni selector . 
Spesial kali ini, kita akan membahas 5 selector sekaligus..5 selector ini, berada dalam bab besar CSS Selector.
Wowowow

1. Group Selector

Dari namanya, kita dapat mengetahui, bahwa selector ini dapat menggabungkan beberapa selector untuk dapat dipilih dan direset sedemikian rupa sehingga menyerupai bentuk yang kita inginkan. Dengan adanya, Grup Selector akan mempersingkat proses pengerjaan 

Contoh 

<style>
.pilih1,  #pilih2,  [title~="kamu"] {
    color : green;
}
</style>
<body>
<h1 class="pilih1">Lautan-IT</h1>
<p>Lautan-IT adalah website yang bisa anda gunakan untuk mencari jawaban kuliah :v</p>
<p title="kamu_itu"> Ngoding Enaknya Sambil Ngopi </p>
<hr>
<h1 id="pilih2">Lautan IT</h1>
</body>

Bisakah anda menjelaskannya ? Pasti bisalah, masa gak bisa ;v

2. Element Specific Selector

Contoh Skrip.

<style>
    .pilih1 {
         color : red;
}
</style>
</body>
<h1 class="judul">Lautan IT</h1>
<p>........................</p>
<div>
<h2 class="judul">Lautan IT</h1>
<p>.........................................</p>
</body>

Untuk skrip diatas, sebenarnya, hanyalah implementasi daripada selector yang diberikan spesifikasi atau ciri khas. Termasuk juga didalam ini, adalah ID Selector.

3. Descendant Selector

Konsep utama dari descendant selector, adalah Parent-Child Relationship. 
Ya, tidak hanya kita, struktur HTML, juga memiliki hubungan kekeluargaan yang erat. 
Biasanya, untuk menandakan bahwa memiliki sebuah hubungan. di tandai dengan spasi

Contoh skrip

<style>
div h2 {
       color : red;
}
p em {
       color : purple;
}
body h1 {
      color : green;
}
</style>

Yay, dari sini, kita akan mengetahui, bahwa div merupakan tag "Ayah" daripada tag h2. Jadi, yang berwarna merah, adalah tag h2 setelah tag div. 
Penjelasan yang sama juga berlaku untuk selector lain, pada skrip yang berada diatas.

Gabungkan skrip diatas, dengan skrip yang ada dibawah ini

<body>
  <h1>Lagi Belajar</h1>
  <p>Senggol Bacok Lu</p>
  <div>
    <h2>Lagi Belajar</h2>
    <p><em>Sebuah kata </em>didalam cinta</p>
    <h2>Lagi Belajar</h2>
  </div>
  <h2>Lagi Belajar</h2>
</body>

4. Child Selector

Hampir sama dengan Descendant Selector, hanya saja perbedaanya terletak pada, anak yang mana di atur, Bila descendant selector, memungkinkan semua anaknya diatur, maka tidak dengan Child Selector. Sedikit pilih kasih, karena yang diberi arahan hanyalah anak pertama saja. 

Contoh Skrip

<style>
     div > p {
          color : green;
}
</style>

Gabungkan dengan skrip yang berada diatas, dengan yang dibawah ini

<body>
  <h1>Belajar CSS</h1>
  <p>Mohon jangan diganggu, lagi serius belajar CSS.</p>
  <div>
    <p>Paragraf di dalam tag div 1</p>
    <p>Paragraf di dalam tag div 2</p>
    <article>
      <p>Paragraf di dalam tag div dan article</p>
      <p>Paragraf di dalam tag div dan article</p>
    </article>
    <p>Paragraf di dalam tag div 3</p>
  </div>
</body>

Dan amati hasilnya.

5. Child Selector Upgrade

Sebenarnya, ini adalah salah satu contoh pemanfaatan yang bisa anda lakukan setelah memahami Child Selector dengan baik. 

Contoh :

<style>
    ol ul>li {
            color: green;
}
</style>

Gabungkan dengan skrip yang berada dibawah ini,..

<body>
<ol>
      <li>List
           <ul>
                    <li>Pilih Lautan</li>
                    <li>Pilih Lautan</li>
                    <li>Pilih Lautan</li>
            </ul>
</li>
</ol>
</body>


Selamat Belajar :D

Post a Comment

0 Comments