PDA

View Full Version : placing border style on just one list item


JonnyJ
05-27-2009, 05:23 PM
Hello Everyone,

I'm working on an unordered list navigation bar. I have set the links of my unordered list items(li a:hover) to have borders on the top, bottom, and left. When I place borders on all four sides, it doubles the borders. So, I placed borders only on the left.
Now what I need is to place a right border ONLY on the very last list item.

I think what I'm doing is common practice for list item navigation, but I'm unaware as to how to place a border on only one list item.

can anyone point me towards the correct css coding?


a million thanks

domedia
05-27-2009, 05:29 PM
Add a separate id or class on the last LI
<li id="lastli">
then in CSS
#lastli {border-right: 1px solid black;}

Corrosive
05-27-2009, 05:30 PM
Hello Everyone,

I'm working on an unordered list navigation bar. I have set the links of my unordered list items(li a:hover) to have borders on the top, bottom, and left. When I place borders on all four sides, it doubles the borders. So, I placed borders only on the left.
Now what I need is to place a right border ONLY on the very last list item.

I think what I'm doing is common practice for list item navigation, but I'm unaware as to how to place a border on only one list item.

can anyone point me towards the correct css coding?


a million thanks

make a class that states border right and then add that class to the final list tag...

<li>Your Link 1</li>
<li>Your Link 2</li>
<li class="yourstyle">Your Link 3</li>

JonnyJ
05-27-2009, 05:47 PM
wow, what a quick response. that did the trick, thanks guys.
I was messing around with the child pseudo classes, but I couldn't achieve a cohesive result with all browsers.

You guys are awesome

domedia
05-27-2009, 06:26 PM
I was messing around with the child pseudo classes, but I couldn't achieve a cohesive result with all browsers. One day.. one day we'll be there with browser support 8)