CODEWITHSUNDEEP
htmlcss
user3926579
user3926579

Reputation: 67

Remove navigation divider at the end of nav bar - HTML/CSS

I am having trouble removing the last border divider after 'PART C'. I would like to keep the border on the right of each element in the navigation list apart from the last one. 

a {
  text-decoration: none;
  color: #000000;
  display: block;
  width: 150px;
}
li {
  list-style: none;
  float: left;
  padding-left: 10px;
  width: 150px;
}
ul {
  width: 900px;
  margin: 0px auto;
}
.nav {
  padding: 25px 50px 10px 0px;
  z-index: 1;
  font-family: "Avenir";
}
.nav a:hover {
  color: #cccccc;
}
.nav a {
  color: #000;
  display: block;
  line-height: 14px;
  padding-left: 10px;
  padding-right: 30px;
  text-decoration: none;
  border-right: 1px solid #000;
  text-align: center;
  width: 100px;
}
<div class="header">
  <div class="container">
    <div class="nav">
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">ABOUT ME</a>
        </li>
        <li><a href="#" id="button">PART A</a>
        </li>
        <li><a href="#" id="button1">PART B</a>
        </li>
        <li><a href="#" id="button2">PART C</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 1

Views: 1850

Answers (4)

Safal Maid
Safal Maid

Reputation: 1

:last-child do not work below IE9

Use this it will work on all browser

a#button2 {border-right: none;}

Upvotes: 0

ItzMe_Ezhil
ItzMe_Ezhil

Reputation: 1406

Another solution is add class to last li a{ which li doesn't need border} and write style to class.

'a.no_border { border-right: 0; }'

Demo link

Upvotes: 0

K K
K K

Reputation: 18099

Add this rule:

.nav li:last-child a{border-right:none}

Demo :http://jsfiddle.net/lotusgodkk/Lewza63r/

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

You could use :last-child css selector.

a {
  text-decoration: none;
  color: #000000;
  display: block;
  width: 150px;
}
li {
  list-style: none;
  float: left;
  padding-left: 10px;
  width: 150px;
}
ul {
  width: 900px;
  margin: 0px auto;
}
.nav {
  padding: 25px 50px 10px 0px;
  z-index: 1;
  font-family: "Avenir";
}
.nav a:hover {
  color: #cccccc;
}
.nav a {
  color: #000;
  display: block;
  line-height: 14px;
  padding-left: 10px;
  padding-right: 30px;
  text-decoration: none;
  border-right: 1px solid #000;
  text-align: center;
  width: 100px;
}
.nav li:last-child a {
  border-right: none;
}
<div class="header">
  <div class="container">
    <div class="nav">
      <ul>
        <li><a href="#">HOME</a>
        </li>
        <li><a href="#">ABOUT ME</a>
        </li>
        <li><a href="#" id="button">PART A</a>
        </li>
        <li><a href="#" id="button1">PART B</a>
        </li>
        <li><a href="#" id="button2">PART C</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Reference: MDN

Upvotes: 3

Related Questions