10 replies [Last post]
linuxbeanie
linuxbeanie's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-10-06
Posts: 5
Points: 0

I'm trying to create an horizontal unordered list that will allow me to separate each list item with a pipe symbol. I do not want the first item to have a pipe symbol in front of it and the last item to not have a trailing pipe symbol.

Is there a way to pull this off in CSS? Or do I have to do it manually and throw away the semantics in favor of just getting the job done?

  • item 1
  • item 2
  • item 3
  • item 4

li { display: inline; }

I want this:
item 1 | item 2 | item 3 | item 4

  • item 1 |
  • item 2 |
  • item 3 |
  • item 4

Sure, I could do the above but that would mean the list items contain the pipe which is semantically incorrect.

And I could do the following but this too is symantically AND syntactically incorrect:

  • item 1 |
  • item 2 |
  • item 3 |
  • item 4

Any ideas?

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 6 years 2 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hi, You could do this with

Hi,
You could do this with CSS but you would have to create seperate classes for the end and center links. Just set a right border on all links except the far right. This will replace the pipe. It depends how much trouble you want to go to, I guess.

You could use this instead of the pipe.
& #166;

Life's a journey. Enjoy the trip.

linuxbeanie
linuxbeanie's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-10-06
Posts: 5
Points: 0

Thanks Phreestyle

Thanks Phreestyle

Yes, that is a nice suggestion. Nice way to skin a cat :thumbsup:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.pipelist li {
display: inline;
padding: 0 1em;
}
.pipeafter {
border-right: 1px solid red;
}

I saw the examples on listamatic but decided against it due to the IE hacks. Again, thanks for reply.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 6 years 2 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

No worries. I hope it works

No worries.

I hope it works out for you.

cheers

Life's a journey. Enjoy the trip.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

last:child

You could use something elegant, like this:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

.pipelist li {
display: inline;
padding: 0 1em;
border-right: 1px solid red;
}

.pipelist:last-child {
border-right: none;
}

http://www.quirksmode.org/css/firstchild.html

Also found this site in my search

http://last-child.com/

looks like good reading Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

:first-child/:last-child no

:first-child/:last-child no work in IE6

It's perhaps easier to place a single class on the last element that removes borders rather than add a class to all the elements that require one, much as per TPH's example replacing the last-child for a plain class though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 6 years 2 weeks ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Hugo's suggestion is

Hugo's suggestion is infinitly more elegant and succinct than mine. Use that. I know I will.

Life's a journey. Enjoy the trip.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

IE6

Hugo wrote:
:first-child/:last-child no work in IE6

I know, yet I don't care. Although in hindsight I probably should have noted that in my post, much like I did with the attribute selector for that Blogger topic.

This is why I hate IE so much, you have to do so much because it doesn't support such awesome CSS.

Long live the Fox!

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Opera doesn't support ::last

Opera doesn't support ::last child, but Konqueror (and presumably Safari) does. ::first child is generally supported by modern browsers, which description does not include IE.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

IE7

IE7 seems to at least support :first-child.

Well, it only took them 7 versions to get halfway there with first and last child selectors.

Sigh Sad

Verschwindende wrote:
  • CSS doesn't make pies

linuxbeanie
linuxbeanie's picture
Offline
newbie
Last seen: 13 years 49 weeks ago
Joined: 2007-10-06
Posts: 5
Points: 0

Thanks for replies.

Thanks for replies.

Yes, I knew about the first-child/last-child issues - thats why I didn't bother to use it.

Taking Hugo's advice, here's the new code:


  • Item 1

  • Item 2

  • Item 3

.pipelist li {
display: inline;
padding: 0 1em;
border-right: 1px solid #999;
}
.pipelist .pipelast {
border-right: none;
}