Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide last | with CSS?

Tags:

html

css

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.

like image 345
Promit Avatar asked Oct 17 '25 17:10

Promit


2 Answers

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

#menu-footer-menu li:last-child .f_sep{ display:none }
like image 162
Simrandeep Singh Avatar answered Oct 19 '25 07:10

Simrandeep Singh


#menu-footer-menu li:last-child .f_sep{
  display: none;
}
like image 23
Alfin Paul Avatar answered Oct 19 '25 07:10

Alfin Paul



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!