CODEWITHSUNDEEP
htmlcss
fightstarr20
fightstarr20

Reputation: 12628

Change background colour of a tag

I have a very basic menu structure built in HTML....

<ul id="menu-navigation">
    <li id="menu-item-1">
        Menu Item 1
    </li>
    <li id="menu-item-2" class="current-menu-item">
        <a href="#">Menu Item 2</a>
        <ul class="sub-menu">
            <li class="sub-1"><a href="#">Sub-menu Item 1</a></li>
            <li class="sub-2"><a href="#">Sub-menu Item 2</a></li>
            <li class="sub-3"><a href="#">Sub-menu Item 3</a></li>
        </ul>
    </li>
    <li id="menu-item-3">
        Menu Item 3
    </li>
    <li id="menu-item-4">
        Menu Item 4
    </li>
</ul>

I am trying to target just the a tag called Menu Item 2 using...

#menu-navigation .current-menu-item a{background:blue;}

But this is also turning all of the links in the sub-menu blue as well. How can I target just the first a tag?

Upvotes: 0

Views: 80

Answers (2)

Adrift
Adrift

Reputation: 59859

Use the child selector:

#menu-navigation .current-menu-item > a {
    background: blue;
}

Upvotes: 2

Aaroniker
Aaroniker

Reputation: 190

#menu-navigation .current-menu-item > a {
    background:blue;
}

Take a look: http://css-tricks.com/child-and-sibling-selectors/

Upvotes: 2

Related Questions