Prioritas Selector CSS dalam HTML

Posted by on
Pada materi sebelumnya kita telah mempelajari bahwa ada 5 jenis selector.Nah sekarang ,muncul pertanyaan apabila banyak jenis selector yang digunakan di dalam satu file ,selector yang manakah yang akan dipakai ?Berikut adalah pembahasannya.(Jika belum mengerti tentang Selector dan CSS bisa klik disini untuk mendalami tentang  CSS)



Seperti yang diketahui,CSS adalah singkatan dari Cascadin Style Sheet yang berarti style dapat ditimpa atau menimpa style lain berdasarkan urutannya.Jika kita berbicara soal prioritas CSS,kita akan membahas menjadi 2 bagian yaitu :
  • Berdasarkan Sumber
  • Berdasarkan Spesifikasi

BERDASARKAN SUMBER

Jika berasal dari sumbernya,maka kita bicara tentang manakah yang lebih dulu diprioritaskan apabila ada dua kode CSS yang dimasukkan ke dalam HTML lewat dua metode yang berbeda.Sebagai contoh,kita menuliskan tag <h1> dan ingin membuat kode CSS menggunakan external style sheet untuk mengubah agar tag <h1> menjadi berwarna merah.Namun pada saat yang sama,kita juga membuat internal style sheet untuk mengubah tag yang sama yaitu <h1> menjadi warna hijau.Dengan kondisi seperti ini,manakah yang dipilih browser ketika tag <h1> digunakan ?

Contoh :

Ketikkan script berikut dan simpan dengan nama prioritas.css 

h1 {color: blue;}

Lalu buatlah file HTML nya dan simpan dengan nama cssprioritas.html
<!DOCTYPE HTML>
<html>
<head>
<title>PRIORITAS</title>
<link rel="stylesheet" type="text/css" href="prioritas.css">
<style type="text/css">
h1 {color:red;}
</style>
</head>

<body>
<h1>Teks ini berwarna apa ?</h1>
</body>
</html>

Pada contoh di atas,tag <h1> berusaha untuk diubah warnanya dengan menggunakan CSS dari file prioritas.css yang ingin mengganti warna menjadi biru.Kedua dengan menggunakan kode CSS yang ada diantara tag <style> dan </style> dengan warna merah.Ketika ditampilkan di browser,maka warna merah yang akan ditampilkan.Mengapa demikian ?

Karena jika ada kejadian seperti contoh di atas,maka berlaku aturan prioritas tersendiri yaitu :
  • CSS yang dimasukkan dengan metode Inline Style yaitu style yang langsung melekat pada tag dalam tag <body> akan diprioritaskan terlebih dahulu
  • CSS yang dimasukkan denan metode Internal Style Sheet yaitu style yang dideklarasikan pada awal halaman di antara tag <style> dan </style> akan diprioritaskan selanjutnya
  • CSS yang dimasukkan menggunakan metode External Style Sheet ,yaitu style yang dideklarasikan pada sebuah file terpisah yang berekstensi .css akan diprioritaskan terakhir.
Dengan melihat prioritas di atas,maka tidak aneh jika teks "Teks ini berwarna apa?" akan berwarna merah karena metode Internal Style Sheet lebih mendapat prioritas daripada metode External Style Sheet.

BERDASARKAN SPESIFIKASI


CSS memiliki aturan tertentu tentang pengaturan prioritas berdasarkan spesifikasi selectorAturan tersebut diatur dengan menggunakan formula 4 digit.misalnya 0,0,0,0.Cara untuk memahaminya adalah sebagai berikut :
  • 4 digit angka ini sama dengan bilangan matetmatika,seperti 0,0,0,1 dan 0,0,1,0 maka yang lebih besar adalah 0,0,1,0.Begitu juga jika ada formula antara 0,0,1,0 dan 0,1,0,0 maka yang lebih besar adalah 0,1,0,0.
  • Setiap element atau tag selector memiliki nilai 0,0,0,1
  • Setiap class selector dan atribut selector memiliki nilai 0,0,1,0
  • Setiap ID Selector memiliki nilai 0,1,0,0
  • Setiap Inline Style memiliki nilai 1,0,0,0
Nah sekarang kita akan mempelajari urutan prioritas kode CSS jika seluruh kode CSS ditulis di dalam satu file yang sama ,tetapi dengan jenis-jenis selector yang berbeda.Ketikkan kode HTML di bawah ini : 
<!DOCTYPE HTML>
<html>
<head>
<title>PRIORITAS</title>
<style type="text/css">
p {color: aqua;}

div p {color: blue;}

#teks {color: red;}

body div p {color: yellow;}

div p.kalimat {color: green}

</style>
</head>

<body>

<div>
<p id="teks"> Tebak Warna Teks !</p>
</div>

</body>
</html>

Pada script di atas kita menggunakan 5 selector ,akan tetapi yang dipanggil dalam tag <body> hanyalah selector  #teks karena dalam pemrograman CSS,selector yang paling diprioritaskan adalah selector id (#teks).Berikut penjelasan lebih lanjutnya ,perhatikan contoh kode CSS dan aturan pemahaman urutan kode CSS di atas :

  • p {color: aqua;} : untuk selector p di bawah ini hanya terdiri dari 1 tag yaitu tag.Oleh karena itu nilainya : 0,0,0,1
  • div p {color: blue;} : untuk selector div p terdiri dari 2 tag yaitu div dan p.Oleh karena itu nilainya : 0,0,0,2
  • #teks {color: red;} : untuk Id Selector terdiri dari 1 ID.Dan karena berjenis ID Selector maka nilainya lebih tinggi yaitu 0,1,0,0
  • body div p {color: yellow;} :untuk selector body div p terdiri dari 3 tag selector.Oleh karena itu nilainya 0,0,0,3
  • div p.kalimat {color: green} : untuk selector div p.kalimat terdiri dari 2 tag selector (div dan p) dan satu class selector (kalimat) sehingga nilainya 0,0,1,2
Dari penjelasan di atas makka terlihat jika ID Selector #teks memiliki nilai yang paling tinggi sehingga lebih diprioritaskan.

Sekian pembahasan mengenai prioritas dalam selector,jika ada yang kurang jelas dapat ditanyakan di kolom komentar.Semoga ilmu yang dibagikan bermanfaat.Terima Kasih !

Comments

Post a Comment