Applying border-right to all elements except the last one

css, css-selectors, html, php, wordpress

Solution

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.

Problem

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> ```

Original source