Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

Adding a partial border on list item but not on the first element

Hi experts,
I have a top menu bar created with a list and I want separators made of a partial border.
So far I have this:
#TopLinks .nav > li > a:after{content:""; background: #a8a8a8; position: absolute; bottom: 5px; left: 0; height: 50%; width: 1px;}
This is working great, but I don't want the first element to have a border.
I've tried combined (not)first-child with the previous style, but I can't make it work.

That's what I have so far with the style above:
 topbarYou can see that the first element has a border on the left, which I don't want.
Any help appreciated, thanks.
0
hqdev
Asked:
hqdev
  • 3
  • 3
  • 2
1 Solution
 
ChetOS82Commented:
#TopLinks .nav > li:first-child > a:after{width:0px;}
0
 
GaryCommented:
#TopLinks .nav > li > a:not(:first-child):after{...}
0
 
ChetOS82Commented:
My only concern with :not is that it isn't supported on IE8 or earlier.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
hqdevAuthor Commented:
ChetOS82, this is working!
Sorry Cathal, but this is not working.
0
 
hqdevAuthor Commented:
It's for an intranet, so we are in control of browsers and we will use only the latest, it's ok, if it's not IE8 compatible.
0
 
GaryCommented:
Yeah it should have been

#TopLinks .nav > li:not(:first-child) > a:after

If you are still writing code to support IE8 you need a reality check
0
 
hqdevAuthor Commented:
Just for fun, I've tested your last entry Cathal and it's working, sorry I've already close the case.
0
 
GaryCommented:
NP, accepted solution is perfectly valid.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now