1

I am using this on my nav menu to separate the list items 

nav li + li:before{
    content: " | ";
}

This puts a bar between each list item, it doesn't put the bar before the first element. And using the :before pseudo selector, it doesn't put one at the end. (as suggested here Separators For Navigation)

However, I want to prevent this from carrying through to child list items.

e.g. nav ul li ul li

I've tried content:none; and content:""; on the child but they still display in the sub-menu.

Help please!

Community
  • 1
  • 1
SolaceBeforeDawn
  • 958
  • 1
  • 8
  • 16

2 Answers2

3

Alternative without overwriting, using the Child Combinator (>):

nav > ul > li + li:before {
    content: " | ";
}

The Child Combinator selects an element if it is a direct child of another element (and not a grandchild of that element).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
unor
  • 92,415
  • 26
  • 211
  • 360
2

Ah - I found the answer!

nav ul li li:before {
    content: "";
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
SolaceBeforeDawn
  • 958
  • 1
  • 8
  • 16
  • This does work, and well done! But it's better to use more-specific selectors, rather than have to over-write everything you've specified previously. If only because it's more efficient, and less complex when you try to subtly amend styles later (and have to work out *why* something isn't cascading). – David Thomas Aug 29 '12 at 20:58