Mempelajari Selector Pada Pemrograman CSS - Part 5


Halo Sobat Lautan, semoga sehat selalu ya. 
Kali ini kita akan kembali mempelajari selector pada pemrograman CSS. 

Pada artikel sebelumnya, kita telah mempelajari 3 bagian daripada pseudo class selector. Cek disini << untuk melihat artikel sebelumnya. Nah, kali ini kita akan mempelajari mengenai cascade, inheritance, dan juga specificity

1. Cascade

Cascade adalah sebuah peraturan penurunan style didalam CSS. Didalam cascade, terdapat 5 jenis style. Sebelumnya, kita telah memahami tentang inline style CSS, embedded/internal style CSS, dan juga External style CSS. Sisanya adalah web browser style dan user style

Web browser style adalah style CSS yang di kendalikan langsung oleh web browser. Sebagai contohnya, tag anchor yang selalu bewarna biru dan bergaris bawah, apabila tidak diberi gaya

<html>
<head>
<meta charset="UTF -8">
<title>Belajar CSS</title>
</head>
<body>

<h2>Belajar CSS</h2>
<a href="https://www.lautan-it.com">Lautan IT</a>
<ul>
<li>Info</li>
<li>Tutorial</li>
<li>Materi</li>
<li>Download</li>
</ul>
</body>
</html>

Setiap web browser membawa default masing-masing.

Berbeda jauh dengan user style. User style adalah style yang dibuat oleh pengunjung website. Jarang digunakan, tetapi memang tersedia. Dapat diakses melalui Mozilla Firefox (browser), dari menu option > content
Dalam urutan kekuatan prioritas Cascading Style Sheet, user style menempati urutan paling pertama

Urutan Prioritas Cascading Style Sheet
  1. User Style
  2. Inline Style
  3. Embedded Style dan External Style
  4. Web Browser Style
Dalam suatu kasus, jika jenis selector sama pada satu jenis style, style yang terakhirlah yang akan menang. Hal ini disebut juga dengan "Last Rules Apply"

Contoh Program

<html>
<head><title>Belajar CSS</title>
<style>
p {
   color : green;
}
p {
   color:blue;
}
p{
   color:yellow;
}
</style>
</head>
<body>
<p>Teks ini akan berwarna kuning</p>
</body>
</html>

Dengan memahami konsep daripada Cascading, kita akan dengan mudah untuk merencanakan cara menulis kode CSS. 

2. Inheritance

Inheritance adalah penurunan konsep style yang akan diturunkan dari parent element kepada child element. Berikut adalah contoh scriptnya

<html>
<head>
<title>Belajar CSS</title>
<style>
body {
    color : green;
}
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p>CSS dapat dipelajari dalam website ini. 
Bila ditemukan kendala bisa hubungi kami di Contact yang telah tersedia. Jadi tinggal hubungi saja</p>
</body>
<//html>

Hasil script akan membuat seluruh teks menjadi berwarna hijau. Perhatikan dengan baik-baik, kenapa bisa terjadi demikian. Secara arti dari pada selector, bahwa seharusnya selector tersebut hanya merubah warna teks untuk tag <body>.Tetapi, karena tag <h2> dan <p> berada dibawah tag <body>, maka property color : green diturunkan dari tag <body> ke seluruh child element

Secara umum, proses 'timpa menimpa' style ini akan dimenangkan oleh selector yang paling spesifik, atau selector yang paling dekat dengan element yang menjadi target.

3. Specifity

Specifity adalah metode perhitungan nilai untuk menentukan selector mana yang akan didahulukan. Sesuai dengan namanya, semakin spesifik, maka akan semakin tinggi pula nilai selector tersebut.

Berikut ini adalah contohnya

<html>
<head>
<meta charset="UTF -8">
<title>Belajar CSS</title>
<style>
#paragrafPertama {
      color : red;
}
.paragraf {
      color : blue;
}
p {
      color : green;
}
</style>
</head>
<body>
<h2>Belajar CSS</h2>
<p class="paragraf" id="paragrafPertama">
Paragraf ini akan bewarna merah ? hijau ? atau biru ?
</p>
</body>
</html>

Tag P akan berwarna merah, di karenakan nilai specifity dari selector #paragrafPertama lebih tinggi daripada kedua selector lain. 

Berikut ini adalah tabel nilai specifity dari masing-masing selector CSS.

Selector                           Contoh                   Nilai Specifity

Inline Style                       style="color:blue"     1000
ID Selector                       #paragrafPertama     100
Class Selector                   .paragraf                  10
Atribut Selector                 [href]                      10
Pseudo-class Selector        :link                        10
Element Selector               p                            1
Pseudo-element Selector   ::firstline                 1 
Universal Selector             *                            0

Jika terdapat konflik antara 2 selector yang memiliki property yang sama, selector dengan nilai yang paling tinggilah yang akan menang

Post a Comment

0 Comments