CSS Specificity

CSS Specificity menentukan seberapa spesifik kah sebuah aturan pada CSS. Jika ada 2 atau lebih aturan pada sebuah elemen yang sama, maka aturan paling spesifiklah yang akan dipakai oleh browser.

Nilai specificity pada CSS bisa dihitung sbb:

• Element Selector, yaitu selector yang berupa tag-tag html, contohnya div, ul, li, a
  nilai specificity = 1 (0,0,1)
• Class Selector, yaitu selector yang diawali dengan tanda titik, contohnya .menu untuk elemen dengan class="menu"
  nilai specificity = 10 (0,1,0)
• ID Selector, yaitu selector yang diawali dengan tanda #, contohnya #sidebar untuk elemen dengan id="sidebar"
  nilai specificity = 100 (1,0,0)

Contoh 1:

1
2

a { color: red; }
a { color: green; }

Kedua selector tersebut memiliki specificity yang sama, karena itu aturan yang akan dipakai adalah yang terakhir (paling bawah), sehingga elemen <a> (link) akan berwarna hijau.

Contoh 2:

1
2
3
4
5

#sidebar ul.menu li a { color: red; }
ul.menu li a { color: purple; }
ul li a { color: green; }
li a { color: yellow; }
a { color: teal; }

Kode di atas adalah beberapa aturan css untuk sebuah elemen link (<a>). Kode htmlnya sbb:

1
2
3
4
5
6
7
8
9

<div id="sidebar">
	<h2>Menu</h2>
	<ul class="menu">
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="guestbook.html" style="color:silver">Guestbook</a></li>
	</ul>
</div>

Perhitungan specificity nya:

• #sidebar ul.menu li a
  memiliki specificity = 113
  (1 ID Selector + 1 Class Selector + 3 Element Selector)
• ul.menu li a
  memiliki specificity = 13
  (1 Class Selector + 3 Element Selector)
• ul li a
  memiliki specificity = 3
  (3 Element Selector)
• li a
  memiliki specificity = 2
  (2 Element Selector)
• a
  memiliki specificity = 1
  (1 Element Selector)

Dengan melihat perhitungan specificity di atas, maka kita bisa mengetahui bahwa paling spesifik adalah aturan yang pertama. Jadi link akan berwarna merah.

Selain menggunakan selector, untuk menerapkan css kita juga bisa mendefinisikan inline style, yaitu dituliskan langsung pada tag html menggunakan attribute style, contohnya <a style="color:blue">teks</a>.
Pengaturan menggunakan inline style akan mengalahkan ketiga jenis selector di atas. Jadi pada contoh tersebut, link guestbook akan berwarna silver.

Referensi:
CSS: Specificity Wars

Artikel tersebut akan memberikan pemahaman tentang CSS Specificity menggunakan analogi Star Wars.
Namun bagi yang tidak mengerti Star Wars, mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS