I was working with custom menus in my WordPress theme and assigned each menu item its own class so that I could have a custom background image.

This is basically how WordPress renders the menu (I simplified the number of classes in the example below, as WordPress generates a lot more than that):

1
2
3
4
5
6
7
8
9
10
11

<ul id="sub-menu">
    <li id="menu-item-12" class="custom-class-1 menu-item-12">
        <a href="#">Link 1</a>
    </li>
    <li id="menu-item-15" class="custom-class-2 menu-item-15">
        <a href="#">Link 2</a>
    </li>
    <li id="menu-item-18" class="custom-class-3 current-menu-item menu-item-18">
        <a href="#">Link 3</a>
    </li>
</ul>

<ul id="sub-menu">
	<li id="menu-item-12" class="custom-class-1 menu-item-12">
		<a href="#">Link 1</a>
	</li>
	<li id="menu-item-15" class="custom-class-2 menu-item-15">
		<a href="#">Link 2</a>
	</li>
	<li id="menu-item-18" class="custom-class-3 current-menu-item menu-item-18">
		<a href="#">Link 3</a>
	</li>
</ul>

So if I want to style the menu items at the sub-menu level, the only way to distinguish each menu item (without referencing ID numbers) is via my custom-class-#.

Now, what if I want to make the menu item appear differently if you’re on that page?

Fortunately, WordPress automatically creates a class called current-menu-item. If I were then to write a style like this:

1
2
3
4
5
6
7

.custom-class-1 a {
  color: #f00;
}
 
.current-menu-item a {
  color: #00f;
}

.custom-class-1 a {
  color: #f00;
}

.current-menu-item a {
  color: #00f;
}

Both those classes would have the same specificity and one would take over the other, depending on the order they were written. In a complex setup, this can get very messy, especially if you’re fiddling with a background image and its position.

Turns out, you can actually combine classes, in other words, define a multi-class union.

You can do that like so:

1
2
3
4
5
6
7

.custom-class-1.current-menu-item a {
  color: #f00;
}
 
.custom-class-1.current-menu-item a {
  color: #00f;
}

.custom-class-1.current-menu-item a {
  color: #f00;
}

.custom-class-1.current-menu-item a {
  color: #00f;
}

Now your style will only be applied if your HTML element has both of those classes. I never really had a need for this before today, as there was always another way, but this is good to know!