UVA UVA - 10 days ago 6
CSS Question

How to Remove border-right for a last-child of a list items while using multiple un-ordered lists

I want to remove the last child border-right for a list a elements as follows, I tried with different types to remove it but is not working for this, kindly help me to solve this.

<header>
<div id="tag" >
<ul id="menu-item" class="nav">
<li id="item-1" class="item-type"> <a href="index.html"> Home </a</li>
<li id="item-2" class="item-type"> <a href="about.html"> About Me </a></li>
<li id="item-3" class="item-type"> <a href="contact.html"> Contact </a> </li>
<li id="item-4" class="item-type"> <a href="map.html"> Map </a> </li>
</ul>
</div>
<div id="head">
<ul id="ul-head">
<li id="head-1" > <a href="/"> <img id="profile" src="Images/display.jpg" alt="profile" width="80px" height="80px" /> </a> </li>
<li id="head-2" class="head-item"> TECHNOLOGIES </li>
<li id="head-3" class="head-item"> RESUME </li>
<li id="head-4" class="head-item"> FUTURE SCOPE </li>
<li id="head-5" class="head-item"> INTEREST </li>
</ul>
</div>
</header>


Applied CSS as follows :

#menu-item {
position: absolute;
display: block;
list-style-type: none;
float: right;
left: 850px;
padding: 9px 10px 9px 10px;
text-align: center;
margin: 0px
}
#menu-item > li {
float: left;
display: inline;
border-left: 1px solid #fff ;
padding: 1px 15px 1px 15px;
}
.item-type a {
color: #FFFFFF;
text-decoration: none;
}

#head #ul-head #head-1 a #profile {
position: absolute;
border-radius: 50%;
display: inline;
left: 140px;
top: 0px
}

.head-item {
position: relative;
font-size: 16px;
font-family: Arial;
font-weight: bold;
left: 230px;
top: 15px;
color: #778899;
}
#ul-head > li {
float: left;
display: inline;
border-right: 1px solid #000000;
padding: 1px 25px 1px 25px;
text-align: center;
}
#tag #menu-item li:first-child a {
border-left: none;
}
#head #ul-head li:last-child a {
border-right: none;
}

Answer

You dont have <a> tag in the #ul-head list

so you need to change your code to this :

#head #ul-head li:last-child{
         border-right: none;
     }