Why do I need !important

Question

I have classes in css

.box {
    background-color: white;
    border: solid 5px white;
    border-radius: 5px;
    width: 90px;
    height: 90px;
    margin-top: 30px;
    box-shadow: 0 8px 6px -6px #313131;
    object-fit: fill;
    position: relative;
    cursor: pointer;
}

.active {
    background-color: white;
    border: solid 5px white;
    border-radius: 5px;
    width: 100px!important;
    height: 100px!important;
    margin-top: 20px;
    box-shadow: 0 14px 6px -6px #313131;
    position: relative;
    animation: fadeactive 6s infinite;
}

.box:hover {
    background-color: white;
    border: solid 5px white;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    margin-top: 20px;
    box-shadow: 0 14px 6px -6px #313131;
    object-fit: fill;
    position: relative;
}

.box:hover.active .title {
    display: none!important;
}

.title {
  display: none;
  position: relative;
  font-size: 70%;
  background: black;
  color: white;
  border-radius: 5px;
  padding: 5px;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  width: fit-content;
}

I use .box on some items, and sometimes I use .active as well (using both classes). If I do not use !important, the box size stays 90px instead of 100px. Also in .box:hover.active .title I need to use !important to make it work. What did I do wrong? How can I get rid of !important here?

To override the styles already specified/with more priority. — Abin Thaha, Aug 19 '21 at 08:05
it's due to specificity weight. `div.class` as example has a higher specificity as just `.class`. ÌD's`have higher specificity as classes, `div > .class` is also higher then just `.class`... With the code you provided it will not be reproduable — tacoshy, Aug 19 '21 at 08:06
Because there some class with higher priority, so you should determine with `!important` that which one has the most priority. — Ahmad, Aug 19 '21 at 08:07
[Specificity-Weigth MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) — tacoshy, Aug 19 '21 at 08:09
Do not use `!important` ! Only when absolutely necessary as a last resort. Use a more specific selector to overwrite styles. — Mihai T, Aug 19 '21 at 08:43

score 0 · Answer 1 · answered Aug 19 '21 at 08:07

0

Here in this example, Without the !important, the color will be red since ID has most priority.

But since I gave !important to the span, it is taking that style.

#item1 {
  color: red;
}

.item {
  color: yellow;
}

span {
  color: blue !important;
}

<span class='item' id='item1'>hi</span>

answered Aug 19 '21 at 08:07

Abin Thaha

4,493
3
13
41

thank you. I coudn't use id, since I made the div in js with append from an array. `div.class` made it work. – Wookie Aug 19 '21 at 08:12

Why do I need !important

1 Answers1