How to hide last | with CSS?

Question

I have a HTML ul li like this:

<ul id="menu-footer-menu" class="menu">
   <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356">
      <a href="http://example.com/link1/">Title 1</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357">
      <a href="http://example.com/link2/">Title 2</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358">
      <a href="http://example.com/link3/">Title 3</a>
      <span class="f_sep">|</span>
   </li>
</ul>

which output like this

Title 1 | Title 2 | Title 3 |

So throught CSS I want to hide last |. I tried this but it is hidding all the |

#menu-footer-menu .f_sep:last-child{display:none}

I want the final output like this

Title 1 | Title 2 | Title 3

Please Note: my question is not related to this question because there it is been adding | through, but I already has pipe | in my HTML so I just want to hide the last occurrence.

Possible duplicate of [Add a pipe separator after items in an unordered list unless that item is the last on a line](http://stackoverflow.com/questions/9171699/add-a-pipe-separator-after-items-in-an-unordered-list-unless-that-item-is-the-la) — marmeladze, Mar 14 '17 at 05:30
@marmeladze: please read my _Please Note_ section. Hope it make sense. — Promit, Mar 14 '17 at 07:02

score 6 · Accepted Answer · answered Mar 14 '17 at 05:29

6

You are doing it wrong. Here is the correct answer:

#menu-footer-menu li:last-child .f_sep{ display:none }

answered Mar 14 '17 at 05:29

Simrandeep Singh

569
3
15

score 2 · Answer 2 · answered Mar 14 '17 at 05:33

2

#menu-footer-menu li:last-child .f_sep{
  display: none;
}

answered Mar 14 '17 at 05:33

Alfin Paul

1,543
14
26

score 2 · Answer 3 · answered Mar 14 '17 at 05:37

2

Use this CSS

#menu-footer-menu li:last-child .f_sep{display:none}

answered Mar 14 '17 at 05:37

Sunil Kumar

29
5

score 1 · Answer 4 · answered Mar 14 '17 at 05:29

1

You can try this:

ul li:last-child span {
  display: none;
}

answered Mar 14 '17 at 05:29

Mers

736
4
12

score 1 · Answer 5 · answered Mar 14 '17 at 05:41

Better still use more semantic markup and display the divider with css

#menu-footer-menu{list-style:none; padding:0;}

#menu-footer-menu li {display:inline-block;}

#menu-footer-menu li:not(:last-child):after
{
  content: "|";  
}

<ul id="menu-footer-menu" class="menu">
   <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356">
      <a href="http://example.com/link1/">Title 1</a>
   </li>
   <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357">
      <a href="http://example.com/link2/">Title 2</a>
   </li>
   <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358">
      <a href="http://example.com/link3/">Title 3</a>
   </li>
</ul>

The advantage of this, is you can just change the divider with CSS

I cannot do this because plugin is generating this code, So I have to remove it through CSS only; but thanks for your help. I'll use this approach if I have to make the `ul li` by myself. — Promit, Mar 14 '17 at 07:11

score -1 · Answer 6 · answered Mar 14 '17 at 05:32

You are close to it. Just go with Li elements.

li:last-child span{
  display:none;
  }

<ul id="menu-footer-menu" class="menu">
   <li id="menu-item-356" class="menu-item menu-item-type-taxonomy menu-item-356">
      <a href="http://example.com/link1/">Title 1</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-357" class="menu-item menu-item-type-taxonomy menu-item-357">
      <a href="http://example.com/link2/">Title 2</a>
      <span class="f_sep">|</span>
   </li>
   <li id="menu-item-358" class="menu-item menu-item-type-taxonomy menu-item-358">
      <a href="http://example.com/link3/">Title 3</a>
      <span class="f_sep">|</span>
   </li>
</ul>

How to hide last | with CSS?

6 Answers6