从CSS的ul li元素中删除红色边框

Question

I have the following html code:

<div class="nav">
      <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="home2"><a class="active" href="#">Home2</a></li>
        <li class="home3"><a href="#">Home3</a></li>
        <li class="home4"><a href="#">Home4</a></li>
        <li class="home5"><a href="#">Home5</a></li>
      </ul>
    </div>  
<div class="post">
    <div id="borders">
        <ul>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
            <li>red border</li>
        </ul>
    </div>
</div>

and with that I have a css file:

body {
  padding-top: 2rem;
}
* {
  padding: 0; 
  margin: 0;
  box-sizing: border-box;
}
.nav {
    min-width:100% !important;
}
.nav ul {
  list-style: none;
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  min-width: 100%;
}
.nav li {
  font-size: 20px;
  line-height: 30px;
  height: 30px;
  border-bottom: 1px solid #888;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #919191;
}

.nav a.active {
  background-color: #fff;
  color: #444;
  cursor: default;
}

@media screen and (min-width: 600px) {
  .nav li {
    width: 120px;
    border-bottom: none;
    font-size: 20px;
  line-height: 30px;
  height: 30px;
  }

  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
}

ul li { position: relative; border:1px solid red; display: inline-block; text-align: center;  }
ul { text-align:center; }

And now when I run it in jsfiddle, I see there's a red border around every element. What I want to achieve is to remove the border from the top elements and just use it on the elements from div id = borders. I'm a little bit confused about CSS, because I tried to use the code .borders ui li , but it didn't work well... I thought that's the way how we should call the classes on the webpage? Anyway, could you help me with removing the red border from the top links and leave it only on the words containing "red border"?

Here's the jsfiddle for that http://jsfiddle.net/gfkPG/451/ Thanks!

Answer 1

Use #borders ul li (as # is an id selector, not . – class selector) instead of ul li .

JSFiddle

Answer 2

Your borders is an ID but you're referring to it as a class in your CSS.

Try #borders instead of .borders .

Answer 3

You could use a class here also:

 .borders ul li { border:1px solid red; } 

  <div class="borders"> <ul> <li>red border</li> </ul> </div>