Define the first and last bindings in the list item of unordered lists

Question

I am trying to target the first and last bindings in an unordered list list item:

<ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
</ul>

I tried:

.menu ul .last a {}
.menu ul.last a {}
.menu ul li .last a {}
.menu ul li.last a {}

I need to target anchor as I need to remove the border of the first and last anchor. I can’t use (or at least I don’t think I can) put on <li>, since this requires some vertical filling, so the border of the separator will not be vertical.

Answer 1

If you don’t need to worry about old browsers, use pseudo-classes :first-childalso :last-childin list items, for example:

/* Because we are looking at the <li> children of your <ul> */
.menu ul li:first-child a {}
.menu ul li:last-child a {}

CSS3 :last-child , , last, ( ):

<ul>
    <li class="first"><a href="#">HOME</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li><a href="#">LINK</a></li>
    <li class="last"><a href="#">LINK</a></li>
</ul>

:

.menu ul li.first a {}
.menu ul li.last a {}

Answer 2

:first-child :last-child :

<style type="text/css">
.menu ul li:first-child a {
  color: green;
}
.menu ul li:last-child a {
  color: red;
}
</style>

<div class="menu">
  <ul>
    <li><a href="#">apple</a></li>
    <li><a href="#">baker</a></li>
    <li><a href="#">charlie</a></li>
    <li><a href="#">delta</a></li>
  </ul>
</div>

Answer 3

I think you need: first-child and last-child selectors.

.menu ul li:first-child a
.menu ul li:last-child a