CSS / Bootstrap 3: remove styling from links

Question

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; 
}

Answer 1

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;
}

Answer 2

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>

Answer 3

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.