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 denganclass="menu"
nilai specificity = 10 (0,1,0) - ID Selector, yaitu selector yang diawali dengan tanda #, contohnya
#sidebar
untuk elemen denganid="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
o
buat belajar aya “
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
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
nice post man .. !!!
thx mas,,,. newbie ni. btw
\"mungkin artikel tersebut bisa memudahkan untuk memahami Star Wars melalui CSS \" yang ini keren.. kebetulan saya belom nonton
makasih, masih newbie juga.
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…
wkwkw, analogi starwars, icic
bla bla bla
wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya htpp://aplikasiphp.com
thanks buat ilmunya mas
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
wah, tutorialnya bagus banget mas.. jadi inspirasi bagi saya untuk buat artikel lagi di web saya AplikasiPHP.com
thanks buat ilmunya mas
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?