UL menu: add | between links but not at ends?

[nate22]

I have a horizontal list that looks like this:

link one | link two | link three | link four |

I want it to look like this instead (no right border on link 4):

link one | link two | link three | link four

…how can I do this?

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

[Paulie_D]

There are a number of ways to do it depending on your particular situation.

Apply a special class (perhaps ‘last’) to that list item which removes the border.

Another is to use ‘last-of-type’.

[nate22]

It’s not “last,” but it might be “last-of-type” (I’m not sure what that is).

The actual UL goes to multiple lines because it is auto-generated. Is there a way to target the end of each line, not just the last element of the UL?

[Paulie_D]

We’d need to see your code, a link would be better, to be able to offer specific solutions.

[nate22]

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

[nate22]

have I frightened you away with my sloppy code?

[Taufik Nurrohman]

Try something like this:

nav li {

border-right:1px solid black;

}



nav li:last-child {

border-right:none;

}

[Anonymous]

@Hompimpa That is close, but older versions of IE do not support last child.

The workaround is very simple though! Seeing as first child IS supported in IE, simply do the reverse.

nav li {

border-left: 1px solid black;

}

nav li:first-child {

border-left: 0;

}

[nate22]

Thanks, Hompimpa, but that doesn’t work because each link is within a separate LI. So the last-child of the LI is also the first.

IE:

< UL>
< LI >< a >link< /a >< /LI >
< LI >< a >link< /a >< /LI >
< LI >< a >link< /a >< /LI >
< /UL >

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

[Taufik Nurrohman]

@TheDark12 Hah! I don’t know about that :p

How about this:

nav li a {

border-left: 1px solid black;

}

nav li:first-child a {

border-left: 0;

}

[nate22]

Good thinking, Hopimpa… but, then, will I have the same problem on lines 2 and 3 on the left side rather than the right side? It seems like this new code would just move the | to the left side at the beginning of new lines (except for the first line, of course).

EDIT: can NOT be done reliably in a autonav because with the variable widths of the navigation (driven by the anchor text length), the last item could be the end of row one or it maybe at the start of row two, etc.

[Author]

Posts