How to remove nested link underline and color with CSS?

Question

I'm unable to change/remove the link underline and color of the nested text. I checked the debug console and the color says it's inherited from a.masonry-item. I tried changing it but it doesn't do anything. If I change the color from the debug console, it does trickle down. What am I doing wrong?

a.masonry-item {
  text-decoration: none;
  color: red;
}

<a href="#" class="masonry-item">
  <div class="card masonry-content">
    <img src="https://picsum.photos/450/325?image=100" alt="Dummy Image" />
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</a>

My expected result is red text with no underline but it has no effect.

and
. Preferably I'd like to remove all color and decorations from that — Tong, Mar 25 '19 at 00:35
The reason I'm focusing on a.masonry-item is because the console says that's where it's inherited from. — Tong, Mar 25 '19 at 00:36
There is no `
`. The only elements containing text are `
` and `
`. What is supposed to be red? This question is quite unclear. — Andy Hoffman, Mar 25 '19 at 00:44
Possible duplicate of [How can I override Bootstrap CSS styles?](https://stackoverflow.com/questions/20721248/how-can-i-override-bootstrap-css-styles) — AuxTaco, Mar 25 '19 at 02:17

score 1 · Answer 1 · answered Mar 25 '19 at 00:37

1

You can force the removal of any property in CSS by using "!important".

For example:

a.masonry-item {
    text-decoration: none !important;
    color: red;
}

answered Mar 25 '19 at 00:37

Thanks but it didn't work. Another user pointed out it's being overridden so I'll have to debug. – Tong Mar 25 '19 at 00:43
1

Yes, CTRL-F5 is your friend. – Mar 25 '19 at 00:54

How to remove nested link underline and color with CSS?

`. The only elements containing text are `

` and `

and

1 Answers1