Make the last category unbordered

Question

I am trying to make the last category have no bottom border, is there is any trick to done it without programming?

HTML & CSS:

<style>
#menu {
  border:1px red solid;padding:10px
}
#menu a {
  display:block;
  border-bottom:1px #000 dotted
}
</style>
<div id="menu">
  <p>MAIN MENU</p>
  <a>Computers</a>
  <a>Design</a>
  <a>Programming</a>
</div>

EXAMPLE: http://jsfiddle.net/GLJWp/

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

Have a look at the :last-child pseudo class, which will apply the css rules only to the last item: http://www.quirksmode.org/css/firstchild.html

In this case you'd style the last link by:

#menu a:last-child {border-bottom:none}

For supporting IE <9, have a look at this beautifully horrible conditional stylesheet hack.

edited May 23 '17 at 12:27

Community

1
1

answered Oct 08 '12 at 20:19

Ben D

14,321
3
45
59

`last-child` is not compatible with IE, at least not in 6-8, don't know about IE9. – The Alpha Oct 08 '12 at 21:22

The Alpha · Accepted Answer · 2012-10-08T21:20:22.927

You may try this, because last-child doesn't work in IE

HTML

<div id="menu">
    <p>MAIN MENU</p>
    <a>Computers</a>
    <a>Design</a>
    <a>Programming</a>
</div>

CSS

#menu{
    border:1px red solid;padding:10px
}
#menu a{
    display:block;
    border-top:1px #000 dotted
}

The following would effect the first a after the p, a:first-child won't work in IE because p is the first child element

#menu p + a{
    border-top: none;
}

DEMO.

score 1 · Answer 3 · answered Oct 08 '12 at 20:23

1

Done here: http://jsfiddle.net/GLJWp/2/

answered Oct 08 '12 at 20:23

Whymarrh

13,139
14
57
108

Make the last category unbordered

3 Answers3