CODEWITHSUNDEEP
htmlcss
inspirednz
inspirednz

Reputation: 5077

How can I make one <a> item with its own class a different colour from others?

Sorry if my title is not exacting enough. I was not sure how to describe this in a few words for a title.

Background

I am customising a wordpress.com template.

It's the following site: http://chaine-charlotte.org/donate/

I have put a gold coloured box (using padding) around the DONATE menu item. But I now have the issue that I need to change the font colour for just that item, both in it's inactive and active state.

I have applied the CSS class .donate to the donate menu item, so I can apply custom css to it.

What I am trying to do

I have been trying to use Firebug and also Web Developer Tools (Firefox add-on) to identify which selectors I need to modify to change the font colour. I found them, but could not figure out how to only change the colours (current and non-current <a>) on the DONATE menu item.

As fas as I can tell, the CSS that applies the colour to the current/active menu item across all the menu items is:

.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
color: #C39738;
}

And the code affecting the inactive/not-current menu items is:

.main-navigation a {
border-bottom: medium none;
color: #FFF;
...
}

That one I was able to change by adding in a declaration for .main-navigation .donate a.

Question

So my question is, how do I change this selector so that I have a version of it that only applies to the .donate class ?

.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a, .main-navigation li.current_page_ancestor > a, .main-navigation li.current-menu-ancestor > a {
color: #C39738;
}

Upvotes: 0

Views: 59

Answers (3)

Alen
Alen

Reputation: 203

You can use the menu id for this:

#menu-item-157 > a{color:blue}

Upvotes: 0

Arjun S Kumar
Arjun S Kumar

Reputation: 376

The donate class is added to the LI element. So you can do this.

If the page or it's child is active, then:

.main-navigation li.donate.current_page_item > a, .main-navigation li.donate.current-menu-item > a, .main-navigation li.donate.current_page_ancestor > a, .main-navigation li.donate.current-menu-ancestor > a { 
color: #C39738; 
}

If the page is not active: 

.main-navigation li.donate a {
border-bottom: medium none;
color: #FFF;
}

Upvotes: 1

inspirednz
inspirednz

Reputation: 5077

Looks like this is what was needed...

Add the following selector:

.main-navigation li.donate.current_page_item > a, .main-navigation li.donate.current-menu-item > a {
color: blue;
}

Upvotes: 0

Related Questions