Remove border radius of List without overriding globally (Bootstrap 3)

Question

I am using Bootstrap 3 to create a small application. I need to use their linked list but do not want the rounded borders.

From the CSS file, they use the following:

.list-group-item:first-child {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

At the moment, i override the classes using the following:

.list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

The problem with this is that this makes all lists I have render no borders. Is there a way to override for just this single instance that I use it?

Here's an example from bootstrap on how to use this (http://getbootstrap.com/components/#list-group-linked):

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Answer 1

Can you add a special class name for your list-group such as list-special? Then use...

CSS

.list-special .list-group-item:first-child {
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
}

.list-special .list-group-item:last-child {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

HTML

<div class="list-group list-special">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Demo: http://bootply.com/95585

EDIT: It's generally not good practice to use CSS !important. Since the list-special provides more specificity, you can remove the !important. I updated the Bootply so that you can see how this works.