Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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?

You could 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’ll 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.

How to Add the First & Last Class to WordPress Navigation Menu Items

Why Style the First and Last Navigation Items Differently?

In a past custom design project, we needed to add some custom styling to the navigation menu items of a WordPress website. In particular, this design required different styling for the first and last menu items.

One option was to simply add a custom CSS class to the first and last menu items. However, if the client changed the menu’s order, then this might break the custom styling.

For this reason, we decided to do use filters instead.

In this guide, we’ll show you how to style the first and last items of your navigation menu, in a way that works even if the menu gets rearranged. 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

The first way to style your navigation menu items is to add a filter to your theme. This requires you to edit your theme’s functions.php file, so it isn’t recommended for beginners.

Changing your theme’s code can cause common WordPress errors, or even break your site completely. With that in mind, you may want to backup your WordPress website before continuing with this method.

If you haven’t changed your site’s code before, then see our guide on how to copy and paste code in WordPress.

To style the first and last menu items, simply open your theme’s functions.php file and then paste the following code snippet:

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');

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 learn how to do this in detail, see our guide on how to style navigation menus.

For this guide, we’ll simply bold the first and last menu items, by adding the following CSS formatting to our theme’s style.css stylesheet:

.first a {font-weight: bold;}

.last a {font-weight: bold;}

In the following image, you can see the same menu before and after we added the code.

Preview of First and Last Menu Items Styled Differently

Method 2: Styling First and Last Items Using CSS Selectors

Another option is to style the first and last menu items differently using CSS selectors. This method is simpler, but it 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’ll 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.

You should start by editing your theme’s style.css file, or by navigating to Appearance » Customize and clicking on ‘Additional CSS’.

After that, you need to paste the following code snippet and then save your changes.

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 site:

ul#primary-menu-list > li:first-child a {
    font-weight: bold;
ul#primary-menu-list > li:last-child a {
    font-weight: bold;
Using CSS Selectors to Style First and Last Menu Items Differently

We hope this tutorial helped you learn how to add the .first and .last class to WordPress navigation menus. You can also go through 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

19 CommentsLeave a Reply

  1. i’ve changed the code slightly to work with child menus too:

    function wpb_first_and_last_menu_class($items) {

    foreach($items as $k => $v){
    $parent[$v->menu_item_parent][] = $v;

    foreach($parent as $k => $v){
    $v[0]->classes[] = ‘first’;
    $v[count($v)-1]->classes[] = ‘last’;

    return $items;


    add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’);

  2. Thanks for this nice code…

    What about child menu first and last item?
    It applied only for parent manu.

    Do you have any idea about child last item?

  3. Anyone have any tip about use add_filter(”); for wp_nav_menu using STARKERS?
    can’t make it works :( JS and CSS are fine to do that, it is just frustrating to don’t be able to fix it from the back…
    thanks to share anyway!!

  4. Together with some other additions to functions.php that i’ve tried, this code fails to tag a menu item as first or last menu item when they are in a submenu. A fix for this would be great!

  5. Great! This is particularly interesting because I have to class more than 2 menu items…
    Now I got it!


  6. Thanks for this! Forgive me if I missed it – but – is there an example of the menu to see the difference in the nav created by this class? Thank you again!

    • The site we designed for our client is not live yet. But the main reason was that we wanted to have a border left to the first menu item. All other items had border right element with a specific padding and margin. We used the last class to remove the margin right and the border right because there was no need for it. It was hitting the wrap container. Hope you can visualize it.


Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.