Menu
I have the following CSS to style a simple list:
ul.menu_list li {
display: inline;
}
ul.menu_list li:after {
content:" | ";
}
ul.menu_list li:last-child {
content:"";
}
<ul class="menu_list">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
I get the desired effect except for the last-child is not losing it's vertical bar, " | ".
Link | Link | Link |
I've tried combining :after:last-child & vice-versa but the first :after declaration always takes precedence.
550
When designing and developing web applications, sometimes we need to select all the child elements of an element except the last element. To select all the children of an element except the last child, use :not and :last-child pseudo classes.
The :last-child selector allows you to target the last element directly inside its containing element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
Do:
ul.menu_list li:after {
content:" | ";
}
ul.menu_list li:last-child:after {
content:"";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
