Kenapa saya membuat judul seperti ini, karena perlu teman-teman ketahui di dalam kita menggunakan selctor ada yang di prioritaskan, seperti di busway saja ya teman-teman. tetapi bukan prioritas itu ya teman-teman. Spesificity metode menentukan selector mana yang akan didahulukan. Sesuai dengan namanya, semakin spesifik atau semakin detail sebuah selector, akan semakin tinggi nilainya.
Sebagai contoh Spesificity metode menentukan selector mana yang akan didahulukan, kita lihat langsung struktrur html css berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style><br>#paragrafPertama{<br>color: red;<br>}<br>.paragraf{<br>color: blue;<br>}<br>p{<br>color: green;<br>}<br></style>
</head>
<body>
<h2>Belajar CSS</h2>
<p class="paragraf" id="paragrafPertama">
Paragraf ini akan berwarna merah? hijau? biru?
</p>
</body>
</body>
</html>
Teks “Paragraf ini akan berwarna merah, ini terjadi karena nilai specificity dari selector #paragraf Pertama lebih tinggi daripada kedua selector lain. Di dalam konsep specificity, ID selector memiliki nilai yang lebih tinggi dari pada class selector maupun element type selector.
Sebagai aturan dasar, tabel berikut merangkum nilai specificity dari masing-masing selector CSS:
Jika terdapat konfik antara 2 selector yang memiliki property yang sama, selector dengan nilai yang paling tinggilah yang akan menang.
Dari kode kita sebelumnya, dapat dihitung nilai setiap selector:
Karena selector #paragrafPertama memiliki nilai 100, maka selector inilah yang ‘berhak’ untuk mewarnai paragraf tersebut.
Bagaimana dengan selector gabungan seperti group selector, adjacent selectors atau child selectors? Nilai specificity-nya dihitung dengan menambahkan setiap selector yang ada. Perhatikan tabel berikut ini:
Untuk selector gabungan, nilai specificity-nya dihitung dengan menambahkan element dasar setiap selector tersebut. Saya sangat menyarankan anda untuk mempelajari secara detail hasil dari tabel diatas, karena inilah inti dari konsep specificity di dalam CSS. Dari tabel diatas, kita dapat melihat bahwa Inline style dan ID selector memiliki nilai yang paling tinggi. Inline style mungkin akan jarang anda gunakan, tetapi ID selector layak untuk dibahas. Bagaimana teman-teman cukup paham ya penjelasan tentang Spesificity metode menentukan selector mana yang akan didahulukan, apakah teman-teman sudah paham jika belum saya nanti akan mencoba membuat contoh lain pada artikel berikutnya, terimakasih.
The post Spesificity metode menentukan selector mana yang akan didahulukan appeared first on Kursus Website Terbaik.