Section Artikel
Apa itu Specificity?
Jika ada dua atau lebih aturan CSS yang bertentangan dan mengarah ke elemen yang sama, browser akan mengikuti beberapa aturan untuk menentukan mana yang paling spesifik.
Spesifikasi bisa di anggap seperti skor/peringkat untuk menentukan style mana yang akan diterapkan kedalam suatu elemen.
Selektor universal (*) memiliki spesifisitas rendah, sedangkan untuk memilih ID harus sangat spesifik!
Catatan: Specificity adalah alasan umum mengapa aturan beberapa CSS tidak berlaku untuk beberapa elemen.
Hierarki Specificity
Kita memiliki tempat dalam hierarki spesifisitas. Ada empat kategori yang menentukan tingkat spesifisitas selektor:
- Inline styles – Inline styles ditulis langsung ke elemen yang akan diberi gaya. Contoh: <h1 style=”color: #ffffff;”>.
- IDs – ID adalah pengenal unik untuk elemen halaman, seperti #navbar.
- Classes, attributes and pseudo-classes Kategori ini mencakup .class, [atribut] dan pseudo-class seperti: :hover, :focus dll.
- Elements and pseudo-elements – Kategori ini mencakup nama elemen dan pseudo-element, seperti h1, div,:before and :after.
Bagaimana Menghitung Specificity?
Hafalkan cara menghitungnya!
Mulai dari 0, tambahkan 1000 untuk atribut style, tambahkan 100 untuk setiap ID, tambahkan 10 untuk setiap atribut, kelas atau pseudo-class, tambahkan 1 untuk setiap nama elemen atau pseudo-element.
Pertimbangkan tiga fragmen kode berikut:
Contoh :
A: h1 B: #content h1 C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
Specificity A adalah 1 (satu elemen)
Specificity B adalah 101 (satu referensi ID dan satu elemen)
Specificity C adalah 1000 (gaya sebaris)
Karena 1 <101 <1000, aturan ketiga (C) memiliki tingkat specificity yang lebih tinggi dan oleh karena itu maka aturan itu diterapkan.
Aturan Specificity
Specificity yang sama: aturan terbaru yang dihitung – Jika aturan yang sama ditulis dua kali ke dalam external style, maka aturan bawah dalam external style lebih dekat ke elemen yang akan diberi gaya, maka dari itu external style yang bawah yang diterapkan:
Contoh :
h1 {background-color: yellow;}
h1 {background-color: red;}<!DOCTYPE html> <html> <head> <style> h1 {background-color: yellow;} h1 {background-color: red;} </style> </head> <body> <h1>This is heading 1</h1> </body> </html>
aturan terakhir selalu diterapkan.
Selektor ID memiliki specificity yang lebih tinggi daripada selektor atribut – Lihat tiga baris kode berikut:
Contoh :
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
aturan pertama lebih spesifik daripada dua aturan lainnya, dan akan diterapkan.
Selektor kontekstual lebih spesifik daripada selektor elemen tunggal – Style sheet yang disematkan lebih dekat dengan elemen yang akan diberi gaya. Jadi dalam situasi berikut:
Contoh :
From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 { background-color: yellow; } </style>
aturan terakhir yang akan diterapkan.
Selektor kelas mengalahkan sejumlah selektor elemen – selektor kelas seperti .intro beats h1, p, div, dll:
Contoh :
.intro {background-color: yellow;}
h1 {background-color: red;}<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Selektor universal dan nilai yang diwariskan memiliki spesifisitas 0 – *, body * dan sejenisnya memiliki spesifisitas nol. Nilai yang diwarisi juga memiliki spesifisitas 0.
