Fungsi !important
Menambahkan !important setelah sebuah nilai membuat deklarasi itu menang atas setiap deklarasi normal untuk properti yang sama pada elemen yang sama. Specificity selector dan urutan di kode tidak lagi berpengaruh.
Tanpa !important, ID selector yang akan menang dan teksnya berwarna biru. Hapus !important di editor untuk melihatnya.
Sintaks
selector {
property: value !important;
}
Tanda ini ditulis setelah nilai dan sebelum titik koma. Tanda ini hanya berlaku untuk satu deklarasi itu, bukan seluruh aturan. Tanda ini juga berfungsi di shorthand (margin: 0 !important; membuat keempat sisi menjadi important) dan di atribut style.
Apa mengalahkan apa
Untuk style yang ditulis oleh pembuat halaman, dari yang paling lemah sampai yang paling kuat:
| Peringkat | Deklarasi | Contoh |
|---|---|---|
| 1 | Deklarasi normal di stylesheet | p { color: blue; } |
| 2 | Deklarasi normal di atribut style | <p style="color: blue"> |
| 3 | !important di stylesheet | p { color: blue !important; } |
| 4 | !important di atribut style | <p style="color: blue !important"> |
Di dalam satu peringkat, specificity yang menentukan, lalu urutan munculnya deklarasi: yang belakangan yang menang.
Inilah satu-satunya pemakaian !important sehari-hari yang sah: menimpa inline style yang tidak bisa kamu edit, seperti yang ditulis oleh widget pihak ketiga.
Saat dua deklarasi sama-sama !important
!important melawan !important kembali ke aturan biasa: specificity yang lebih tinggi menang, dan jika seri, deklarasi yang belakangan yang menang.
Begitulah !important makin meningkat: begitu satu aturan memakainya, aturan yang harus menimpanya juga harus memakainya, dan specificity mulai naik lagi.
Specificity CSS dalam satu tabel
Specificity adalah bobot sebuah selector. Hitung tiga angka:
| Kolom | Yang dihitung | Contoh selector | Specificity |
|---|---|---|---|
| A | ID selector | #nav | (1,0,0) |
| B | Class, atribut, pseudo-class | .btn, [type="text"], :hover | (0,1,0) masing-masing |
| C | Type selector, pseudo-element | p, ::before | (0,0,1) masing-masing |
| tidak ada | *, combinator (>, +, ~, spasi) | *, ul > li | tidak menambah apa-apa |
Bandingkan kolom A lebih dulu; hanya jika seri, lihat B, lalu C. Jadi #nav a (1,0,1) mengalahkan .menu .item .link a (0,3,1): satu ID lebih berat dari class sebanyak apa pun.
Memahami tabel ini membuatmu bisa menghindari !important: sebagian besar masalah "CSS saya tidak diterapkan" disebabkan aturan lain yang lebih spesifik, yang bisa dilihat di panel Styles DevTools dengan deklarasimu dicoret.
Alternatif yang lebih rapi
- Samakan specificity-nya, lalu andalkan urutan. Muat stylesheet-mu setelah milik library dan pakai selector yang setidaknya sama spesifiknya.
- Turunkan specificity aturan lain dengan
:where(). Semua yang ada di dalam:where()dihitung nol, jadi style dasar yang ditulis dengannya mudah ditimpa. - Pakai variabel CSS sebagai pengait. Komponen yang membaca
var(--btn-bg)bisa diberi tema tanpa harus melawan selector-nya. Lihat variabel CSS.
Mengatur !important dari JavaScript
element.style.color = 'red !important' tidak berfungsi: nilainya tidak valid dan diabaikan. Pakai setProperty dengan argumen ketiga:
el.style.setProperty('color', '#f59e0b', 'important');
Kesalahan umum
- Menaruhnya di tempat yang salah.
color: !important red;tidak valid; tanda ini ditulis setelah nilai. - Memakainya di
@keyframes. Deklarasi yang ditandai!importantdi dalam keyframe diabaikan. - Memperbaiki setiap konflik dengannya. Cari aturan yang menang di DevTools, lalu samakan atau turunkan specificity-nya.
- Berharap tanda ini memengaruhi properti lain.
color: red !importanttidak berpengaruh apa-apa padabackground. - Lupa bahwa
!importantinline mengalahkan milikmu. Tidak ada aturan di stylesheet halaman yang bisa menimpastyle="color: red !important"; ubah atributnya sendiri, misalnya dengan JavaScript.
Pertanyaan yang sering diajukan
Apa fungsi !important di CSS?
!important memberi satu deklarasi prioritas di atas setiap deklarasi normal untuk properti yang sama pada elemen yang sama, apa pun specificity selector atau urutannya. Tulis setelah nilainya: color: red !important;.
Bagaimana cara menimpa !important?
Dengan deklarasi !important lain yang specificity-nya lebih tinggi, atau specificity-nya sama dan posisinya lebih belakang di stylesheet. style inline dengan !important mengalahkan setiap !important di stylesheet.
Apakah !important menimpa inline style?
Ya. Deklarasi di stylesheet dengan !important mengalahkan deklarasi normal di atribut style. Tetapi tidak mengalahkan deklarasi inline yang juga ditandai !important.
Apakah memakai !important itu kebiasaan buruk?
Jika dipakai untuk memenangkan pertarungan specificity, ya: penimpaan berikutnya jadi butuh !important juga, dan stylesheet menjadi sulit diubah. Pemakaiannya wajar untuk utility class yang harus selalu berlaku (seperti .hidden), untuk menimpa inline style dari pihak ketiga, dan di user stylesheet.
Bagaimana cara menghitung specificity CSS?
Hitung tiga kolom: ID selector, lalu class, atribut, dan pseudo-class, lalu type selector dan pseudo-element. Bandingkan kolom demi kolom dari awal, jadi #nav a (1,0,1) mengalahkan .menu .item a (0,2,1). Selector universal * dan combinator tidak menambah apa-apa.
