CODEWITHSUNDEEP
htmlcsstwitter-bootstrapanchor
user2571510
user2571510

Reputation: 11377

CSS / Bootstrap 3: remove styling from links

I am trying to remove styling from links (anchor tags) in the following lines so that the links appear with black color and no underlining by default. For some reason my CSS class ("deco-none") is ignored here and they still appear in blue as normal links (I am using IE9 and Bootstrap 3).

What do I have to change here ?

My HTML: 

<div class="row" style="width:400px;">
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a></li>
    </ul>
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a></li>
    </ul>
    <ul class="list-unstyled col-md-4">
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a></li>
        <li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a></li>
    </ul>
</div>

My CSS: 

a.deco-none: {
    color:#000000 !important;
    text-decoration:none;
}

.bg-menu:hover {
    background-color:#0079C1;
    color:#FFFFFF;
}

.clickable {
    cursor:pointer; 
}

Upvotes: 10

Views: 41287

Answers (3)

Markus
Markus

Reputation: 5807

To make it complete (does not change colour on hover or after clicking it and inherits text-decoration, too):

.deco-none {
  color: inherit;
  text-decoration: inherit;
}

.deco-none:link {
  color: inherit;
  text-decoration: inherit;
}

.deco-none:hover {
  color: inherit;
  text-decoration: inherit;
}

Example Snippet

.deco-none {
  color: inherit;
  text-decoration: inherit;
}
.deco-none:link {
  color: inherit;
  text-decoration: inherit;
}
.deco-none:hover {
  color: inherit;
  text-decoration: inherit;
}
.bg-menu:hover {
  background-color: #0079C1;
  color: #FFFFFF;
}
.clickable {
  cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row" style="width:400px;">
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test1-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test2-3</a>
    </li>
  </ul>
  <ul class="list-unstyled col-md-4">
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-1</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-2</a>
    </li>
    <li class="bg-menu clickable"><a href="#" class="deco-none">test3-3</a>
    </li>
  </ul>
</div>

Upvotes: 9

Carlos Araya
Carlos Araya

Reputation: 881

I would suggest to use the inherit keyword to inherit the parents color. I know you wanted them black, but I'm sure that other users will find it helpful.

a.deco-none {
    color: inherit;
    text-decoration:none;
}

as Dimitry K said, you had the a.deco-none: typo.

Upvotes: 8

Richa
Richa

Reputation: 3289

You got it wrong in CSS. Try this

FIDDLE

a.deco-none {
    color:#000000 !important;
    text-decoration:none;

}

.bg-menu:hover {
    background-color:#0079C1;
    color:#FFFFFF;
}

.clickable {
    cursor:pointer; 
}

Below code is wrong

a.deco-none: {
    color:#000000 !important;
    text-decoration:none;
}

Upvotes: 9

Related Questions