Solved

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

Posted on 2014-02-18
8
248 Views
Last Modified: 2014-02-18
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
Comment
Question by:hqdev
  • 3
  • 3
  • 2
8 Comments
 
LVL 18

Accepted Solution

by:
ChetOS82 earned 500 total points
ID: 39867562
#TopLinks .nav > li:first-child > a:after{width:0px;}
0
 
LVL 58

Expert Comment

by:Gary
ID: 39867565
#TopLinks .nav > li > a:not(:first-child):after{...}
0
 
LVL 18

Expert Comment

by:ChetOS82
ID: 39867578
My only concern with :not is that it isn't supported on IE8 or earlier.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:hqdev
ID: 39867589
ChetOS82, this is working!
Sorry Cathal, but this is not working.
0
 

Author Comment

by:hqdev
ID: 39867597
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
 
LVL 58

Expert Comment

by:Gary
ID: 39867629
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
 

Author Comment

by:hqdev
ID: 39867642
Just for fun, I've tested your last entry Cathal and it's working, sorry I've already close the case.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39867651
NP, accepted solution is perfectly valid.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

679 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question