Applying border-right to all elements except the last one - php

Question

I have Wordpress pages looking like this: Page 1 | Page 2 | Page 3 |
I don't want a border-right on Page 3. How can I delete it?
.primary-navigation {
float: left;
}
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation .menu-item-has-children a {
padding-right: 35px
}
<div id="primary-navigation" class="primary-navigation" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation" class="navigation clearfix mobile-menu-wrapper">
<a href="#" id="pull" class="toggle-mobile-menu">
<?php _e( 'Menu'); ?>
</a>
<?php if (has_nav_menu( 'primary-menu')) { ?>
<?php wp_nav_menu(array( 'theme_location'=>'primary-menu', 'menu_class' => 'menu clearfix', 'menu_id' => 'menu-primary-menu', 'container' => '', 'walker' => new mts_menu_walker)); ?>
<?php } else { ?>
<ul class="menu clearfix" id="menu-primary-menu">
<?php wp_list_pages( 'title_li='); ?>
</ul>
<?php } ?>
</nav>
</div>

Answer 1

Use the :last-child pseudo-class to set border-right: none; on the last <a> in your .primary-navigation.
.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation li:last-child a {
border-right: none;
}
More on the :last-child pseudo-class on MDN.

Answer 2

You can use CSS selector :not(:last-child) to select all your element BUT the last.
ul.menu {
list-style-type : none;
padding : 0px;
}
ul.menu > li {
display : inline-block;
padding-right : 2px;
}
ul.menu > li:not(:last-child) {
border-right : solid 1px black;
}
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>

Answer 3

.primary-navigation a {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
/* border-right: 1px dotted #7b7f82; <-- REMOVE from this declaration block */
position: relative;
line-height: 1;
}
.primary-navigation a:not(:last-child) {
border-right: 1px dotted #7b7f82;
}
Using the :not() negation and :last-child pseudo-classes, all anchors are given the border, except the last one.
Just FYI, this method may be simpler:
a + a {
border-left: 1px dotted #7b7f82;
}
Using the adjacent sibling selector, a left-side border can be applied to all anchors immediately following another anchor. This means no left-side border on the first anchor, and no right-side border on the last anchor.

Answer 4

Add this style to you css:
.primary-navigation { float: left; }
.primary-navigation ul {
margin-top: 16px;
margin-bottom: 12px;
padding-left: 23px;
padding-right: 23px;
border-right: 1px dotted #7b7f82;
position: relative;
line-height: 1;
}
.primary-navigation ul:last-child {
border-right: none;
}
<li class="primary-navigation">
<ul class="menu clearfix" id="menu-primary-menu">Page 1</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 2</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 3</ul>
<ul class="menu clearfix" id="menu-primary-menu">Page 4</ul>
</li>