CSS Specificity

19 Mar 2009 24,176 views

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
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 :))

14 Comments

  1. Danie says:

    buat belajar aya :-\

  2. agus says:

    Mass, ko ditempat saya css nya ko musti di tulis di dalam tag header ya? kalau saya pisah pakai file style.css ngga bisa, padahal sebelumnya bisa. kenapa ya? di localhost juga bisa, tapi pas diupload ga bisa

    • gawibowo says:

      ini tag html untuk link ke external style sheet:

      <link rel="stylesheet" type="text/css" href="style.css" />

      kalau menggunakan spt ini, pastikan file style.css berada pada direktori yang sama dengan file html nya

  3. boo says:

    nice post man .. !!!

  4. rey says:

    thx mas,,,. newbie ni. btw
    \"mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS :))\" yang ini keren.. :)) kebetulan saya belom nonton

  5. ilham says:

    makasih, masih newbie juga.

  6. R. Andi Ramdani says:

    Mas bs buat artikel yg menjelaskan CSS spesifik utk tiap2 browser ga???terkadang kan masing2 browser memiliki compatibility css tersendiri/tdk sama dalam penentuan CSSna…

  7. jono says:

    wkwkw, analogi starwars, icic

  8. rhr says:

    bla bla bla

  9. daud says:

    wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya htpp://aplikasiphp.com

    thanks buat ilmunya mas :)

  10. daud says:

    wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya <a href=\"htpp://aplikasiphp.com\" >AplikasiPHP.com</a>

    thanks buat ilmunya mas

  11. daud says:

    wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya AplikasiPHP.com

    thanks buat ilmunya mas

  12. Dhanang says:

    Manteb ini, akhirnya saya tau kenapa kadang ada style yang gak bisa diubah lgsg. Ternyata baru tau karena adanya CSS Specificity ini.

    Gimana dengan !important mas? Bagaimana specificitynya?

Leave a Reply

Your email address will not be published. Required fields are marked *