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 need to add custom styling to the first and last items of your WordPress navigation menu?

You could simply add a custom CSS class to the first and last menu items, but if the menu is rearranged, then those items will 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 menu items even if the menu items are reordered.

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. This design in particular required different styling for the first menu item and the last menu item.

Now we could easily edit the menu and add a custom CSS class to the first and last menu item. But because we were delivering the project to a client, our solution had to work even if they rearranged the order of the menus.

So we decided to do use filters instead.

In this tutorial, we’ll show you two ways to style the first and last items of your navigation menu. You can choose your preferred method from the list below:

Method 1: Adding First and Last Class Using a Filter

The first way to style your first and last navigation menu items differently is to add a filter to your theme.

You’ll need to add code to your theme’s functions.php file. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

All you have to do is open your theme’s functions.php file 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 navigation menu items respectively. You can use those classes to style the menu items.

To learn how to do this in detail, refer to our guide on how to style WordPress navigation menus.

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

.first a {font-weight: bold;}

.last a {font-weight: bold;}

Here you can see screenshots before and after we added the code to our demo site.

Preview of First and Last Menu Items Styled Differently

Method 2: Styling First and Last Items Using CSS Selectors

A second way to style the first and last menu items differently is to use CSS selectors. This method is simpler, but it may not work with some older browsers, such as Internet Explorer.

To follow this method you’ll have 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 or publish your changes.

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

Note that you will need to replace ‘yourmenuid’ with the actual ID of the navigation menu. The selectors ‘first-child’ and ‘last-child’ select an element if it is the first and last child of its parent, which is the navigation menu.

For example, we used this code to bold the first and last navigation menu items on our demo 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 may also want to learn how to fix 50 common WordPress errors, 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.