How to Add the First and Last CSS Class to WordPress Menu Items

Do you want to add custom styling to the first and last items of your WordPress menu?

One option is to simply add a custom CSS class to the first and last menu items. However, if you rearrange the menu at any point, then those items may no longer be first and last.

In this article, we will show you how to add a .first and .last class that will style the first and last items even if you reorder the menu at a later date.

Why Style the First and Last Navigation Items Differently?

Sometimes, you may need to add custom styling to the first and last items in a navigation menu. This can make important links stand out, such as the link to your site’s contact form or WooCommerce cart page.

In this case, you could simply add a custom CSS class to the first and last menu items. However, if you change the menu’s order at any point, then this might completely break the custom styling.

For this reason, we recommend using filters instead.

In this guide, we will show you how to style the first and last items of your navigation menu, so you can rearrange the menu without breaking the custom styling. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Adding First and Last Class Using a Filter (Recommended)

The easiest way to style your navigation menu items is to add a filter to your theme.

Often you will find code snippets in WordPress tutorials with instructions to add them to your theme’s functions.php file.

The biggest problem is that even a tiny mistake in the custom code snippet can break your WordPress site and make it inaccessible. Not to mention, if you update your WordPress theme, then you will lose all your customizations.

That’s where WPCode comes in.

This free plugin makes it easy to add custom CSS, PHP, HTML, and more to WordPress without putting your site at risk.

The first thing you need to do is install and activate the free WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, head over to Code Snippets » Add Snippet.

Here, simply hover your mouse over ‘Add Your Custom Code.’

When it appears, click on ‘Use snippet.’

To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

You can then add the following PHP to the code box:

function wpb_first_and_last_menu_class($items) {
    $items[1]->classes[] = 'first';
    $items[count($items)]->classes[] = 'last';
    return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');

After that, you are ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so that it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the PHP snippet live.

This creates .first and .last CSS classes for your first and last menu items. You can now use these classes to apply unique styling to these items.

To do this, you will need to add a second snippet to your WordPress website. To start, create a new custom code snippet by following the same process described above.

After that, type in a title for the custom code snippet.

Then, open the ‘Code Type’ dropdown, but this time select ‘CSS Snippet.’

For this guide, we will simply bold the first and last menu items by adding the following CSS formatting to the code box:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

With that done, click on the ‘Inactive’ toggle so that it changes to ‘Active.’

Finally, click on ‘Save Snippet’ to make the CSS snippet live.

Now, if you visit your website, you will see the updated menu live.

Method 2: Styling First and Last Items Using CSS Selectors (No Plugin Required)

If you don’t want to use a plugin, then you can style the first and last menu items using CSS selectors. However, this method may not work with some older browsers, such as Internet Explorer.

With that in mind, it’s a good idea to test your WordPress website in different browsers.

To follow this method, you will need to add code to your theme’s style sheet or the ‘Additional CSS’ section of the WordPress Theme Customizer.

If you haven’t done this before, then see our guide on how to easily add custom CSS to your WordPress site.

The first step is editing your theme’s style.css file or heading over to Appearance » Customize and then clicking on ‘Additional CSS’.

After that, go ahead and add the following code snippet to your site:

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

Note that you will need to replace ‘yourmenuid’ with your navigation menu’s ID.

The selectors’ first-child’ and ‘last-child’ select the first and last child of its parent, which are the first and last items in the navigation menu.

For example, we used this code to bold the first and last navigation menu items on our WordPress blog:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
}
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
}

We hope this tutorial helped you learn how to add the .first and .last class to WordPress navigation menus. You may also want to see our guide on how to create a landing page with WordPress or check out our list of the best drag and drop page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.