What are the implications of using “!important” in CSS? [duplicate]

Answer 1

A little late to this question but it's saying "no matter what other styles are applied, ignore them and use this one". You may find it a little confusing with the ! infront (of the !important) because thats a not operator in javascript but in css it's called a delimiter token that just says to take priority. Heres an example.

---

Without !important:

.set-color{
  color: blue;
 }

.set-color{
  color: red;
 }

outputs RED

---

!important on bottom attribute (of same)

.set-color{
  color: blue;
 }

.set-color{
  color: red !important;
 }

outputs RED (would have been red anyways)

---

!important on top attribute (of same)

.set-color{
  color: blue !important;
 }

.set-color{
  color: red;
 }

outputs BLUE (says ignore red, use blue)

---