Tutorial belajar css # Mengenal Priority Value Css

Perlu kita ketahui bahwa ketika kita menulis code html, css ataupun javascript, web browser akan mengeksekusi kode mulai dari baris pertama hingga baris terakhir.
Oleh karena itu ketika kita menulis selector yang sama dengan properti yang sama pula, maka nilai properti yang digunakan adalah nilai properti pada selector terakhir.

Biar lebih jelas, kita lihat contoh kode berikut,
Tutorial belajar css # Mengenal Priority Value Css

Properti color untuk element <p> adalah properti color dari selector p yang terakhir. Sehingga element <p> memiliki warna teks biru ini karena nilai properti pada selector sebelumnya sudah direplace oleh nilai properti selector terakhir jika properti tersebut sama.
Lalu gimana caranya jika kita ingin nilai properti pada selector sebelumnya yang digunakan untuk menstyling element target.
Itulah yang akan kita bahas pada tutorial kali ini.

Yuk kita mulai aja pembahasannya,

Selector Priority Css

Untuk memahami selector priority lihat aturan berikut ini,

Nilai properti menggunakan inline css lebih diprioritaskan dibanding menggunakan selector id.
```
<div style="nama_properti:nilai_properti">...</div>
```
Niai properti menggunakan selector id lebih di prioritaskan dibandingkan selector menggunakan class ataupun attribute lainnya.
```
#nama_id{nama_propert:nilai_properti }
```
Niai properti menggunakan selector class atau attribute lebih di prioritaskan dibanding menggunakan selector tag.
```
.nama_class{nama_propert:nilai_properti }
[nama_attribute=nilai_attribute]{nama_propert:nilai_properti }
```
Nilai properti menggunakan selector tag memiliki prioritas terendah
```
nama_tag{nama_propert:nilai_properti }
```
Nilai properti pada selector spesifik berdasarkan element parent(element bersarang) memiliki prioritas tergantung pada jumlah tag dan attribute selain id.
```
nama_tag1 nama_tag2.nama_class > nama_tag3.nama_class {nama_propert:nilai_properti }
```

Nilai properti pada selector spesifik bersadasarkan kombinasi tag dan attribute selainnya memiliki aturan seperti aturan ke 4.

nama_tag.nama_class1.nama_class2.nama_class3.[attribute1=nilai_attribute][attribute1=nilai_attribute] {nama_propert:nilai_properti }

Properti value dengan tambahan !important akan memiliki prioritas paling tinggi.
```
selector{nama_propert:nilai_properti!important }
```
Jika semua properti memiliki value !important maka kembali keaturan 1, 2, 3 dan 4
Jika niai properti menggunakan selector dengan prioritas sama ditulis lebih dari satu kali, maka yang akan diimplementasikan adalah selector terakhir.
Aturan diatas hanya berlaku pada element target dan tidak pada element childrennya.

Contoh implementasi priority value

Biar lebih jelas, kita coba implementasikan satu satu aturan diatas,

Inline css (higest priority)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> #mydiv{color:blue} </style> </head> <body> <div id="mydiv" style="color:red">Inline Css</div> </body> </html>

Output :

Bisa kita lihat bahwa nilai properti inline css lebih di dahulukan dibanding nilai properti pada selector id
Selector id (hight priority)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> #mydiv{color:blue} .divclass{color:green} </style> </head> <body> <div id="mydiv" class="divclass">Inline Css</div> </body> </html>

Output :

Dari code diatas bisa kita simpulkan bahwa selector id memiliki prioritas lebih tinggi dari pada selector menggunakan class ini karena attribute id bersifat unik.
Selector class (medium priority)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> .divclass{color:green} div{color:red} </style> </head> <body> <div class="divclass">Inline Css</div> </body> </html>

Output :

Selector menggunakan class memiliki level prioritas medium dan selector menggunakan tag memiliki prioritas terendah, sehingga selector class lebih di dahulukan.
Selector Nested (priority depend on numbers of tag and attrinute)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> div span p{color:blue} p{color:red} </style> </head> <body> <div class="divclass"> <span> <p>Teks paragraf</p> </span> </div> </body> </html>

Output :

Pada contoh diatas kita kita bisa lihat kedua selector menggunakan tag tapi yang pertama berupa element bersarang sehingga selector pertama lebih di dahulukan di banding selector kedua karena memiliki tag lebih banyak.
Selector spesific (priority depend on numbers of tag and attrinute)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> p.myclass{color:red} div span p{color:blue} </style> </head> <body> <div class="divclass"> <span> <p class="myclass">Teks paragraf</p> </span> </div> </body> </html>

Output :

Seperti pada aturan yang telah kita pelajari bahwa class lebih di dahulukan dibanding tag walaupun selector tagnya bersarang,sehingga selector pertama lebih di dahulukan dibanding selector kedua karena memiliki attribute class. Hasilnya akan berbeda jika selector kedua memiliki attribute class juga.
Important value (eleminate other priority)

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> <style> p{color:red!important} </style> </head> <body> <div class="divclass"> <span> <p style="color:blue">Teks paragraf</p> </span> </div> </body> </html>

Output :

Bisa kita lihat contoh diatas bahwa nilai property dengan tambahan !important akan di dahulukan walaupun pada selector tag dengan prioritas terendah dari pada inline css yang tidak memiliki nilai !important.

Sekian dulu pembahasan tentang priority value kali ini.
Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada hal yang ingin ditanyakan atau disampaikan silahkan tulis dikolom komentar.