How to Add the First and Last CSS Class to WordPress Menu Item?


Do you want to learn to add the first and last CSS class to the WordPress menu item?

CSS specifies the outlook of the document. Also, it manipulates all functionality of the website. You can easily add custom CSS to the first and last menu items. If the menu rearranges itself then the items won’t be either first or last. 

In this article, we will present the easiest ways to add classes to the WordPress menu. This article is best for the one who is seeking ways to add classes but doesn’t know how to. Without delay let’s begin.

Why Add the First and Last CSS Class to WordPress Menu Item?

First of all, you must have a basic concept about CSS. CSS is the abbreviation form of Cascading Style Sheets. It is mainly used to add style rules to HTML content. After the addition of custom rules, websites are tasked to do the different things it is not used to doing.

Before you need to add some custom styling to the navigation menu for custom design projects in WordPress. But now you can easily head over the menu and add the first and last CSS. The problem arises when the client rearranges the menu. So, you need to design the menu in such a way that it works even if the client rearranges it. 

Therefore, in this tutorial, we are going to ass the CSS classes using the code method as well as learn to style them. 

Adding of the First and Last CSS Class Using Code

 This method is the easiest and quickest way to add a CSS class. In this method, all you need to do is add the code into your function.php file. Follow the steps mentioned below carefully :

Add the first and last CSS class.
  • Navigate to Snippet >> Add New
Add the first and last CSS class.
  • Copy the code mentioned below:
123456function 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’);
  • Paste the above code into your new snippet beneath the Code area.
Add the first and last CSS class.
  • Save the changes and activate the code.

Hence, you have successfully added the first and last CSS class to the WordPress navigation menu. 

Styling of the First and Last CSS Using CSS Selector

The other way to style the first and last CSS is by using a CSS selector. This method is simple as well but it doesn’t work in the old version’s browser like Internal Explorer. 

In order to follow this method, you need to fulfill the required condition that is you must add code to your theme’s style sheet or the Additional CSS section of WordPress Theme Customizer. Now, follow the steps mentioned below:

  • Navigate to Appearance >> Customize.
  • Click on the “Additional CSS” button. 
  • Copy and paste the code, mentioned below:
12ul#menuid > li:first-child { }ul#menuid > li:last-child { }

Note: The menuid should be replaced by the actual ID of the menu. Also, the selector ‘first-child’ and ‘last-child’ select an element of the menu.

  • Save the changes.

Wrapping up

We hope this article was beneficial for you and helped you to add the first as well as last CSS class in your WordPress navigation menu. Also, check out our article “How to Add Titles in WordPress Menu Without Linking a Page?” to know more about WordPress.


Please enter your comment!
Please enter your name here