Style First Nav Menu Item Using CSS

You can use CSS to style the 1st nav menu item in any theme using :

• first-child
• nth-child(1)
• first-of-type

All 3 CSS rules enable you to style the 1st nav menu link for the primary navigation in Genesis powered child themes.

The first rule uses the first-child selector class like this :

.nav-primary .genesis-nav-menu > li:first-child > a {
    color: red;
}

You could also use nth-child like this :

.nav-primary .genesis-nav-menu > li:nth-child(1) > a {
    color: red;
}

Or use first-of-type like this :

.nav-primary .genesis-nav-menu > li:first-of-type > a {
    color: red;
}

All 3 pseudo-classes enable you to use CSS to target the first element among a group of child elements. In this case, the 1st element of a list of nav menu items.

In WordPress, you could also add a custom class to the 1st menu item and use that class as your selector in a CSS rule in your child themes style sheet.

Related Solutions

• Changing The Primary Navigation Colors In StudioPress Themes