How to apply CSS to a block element in a particular menu window?

Question

I have the navigation bar for my website posted below:

enter image description here

Whenever the active menu option is either Home, About, or Contacts, the navigation bar is align perfectly as you select between the different options.

However, when I'm in the Members option, the navigation bar shifts a little bit to the left. I want to shift it a couple pixels to the right so it aligns perfectly during navigation.

I applied CSS to the following block element:

.navigation > li > a
{
    some styling
}

This affects the styling of the nav bar during navigation.

However, how would I apply some margin styling to the nav bar when Members is selected?

I could rename the class name, but then I would have repetitive code to style the nav bar again, along with the newly added margin fix.

Is there some way to check that when Members is the "active" selection, then apply some CSS margin styling?

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Ivan Ivanov, Jul 16 '14 at 04:34
I tried to use the parent like so: .parentclass.navigation > li > a {margin: 50px;} but it didn't work — user1631224, Jul 16 '14 at 04:43

score 0 · Answer 1 · answered Jul 16 '14 at 05:33

<html>
    <head>
        <title>Parent selector</title>
        <style>
.left {
    float: left;
}
.parent {
    margin-left:20px;
}
.parent.marged{
    margin-left:40px;
}
.parent .child {
    margin:10px;
}
        </style>

    </head>
    <body>
        <div class="parent" id="parent">
            <div class="left child">Home</div>
            <div class="left child selected" id="special">This Will Margin Parent</div>
            <div class="left child">About</div>
        </div>
<script>
var p = document.getElementById('parent'),
    c = document.getElementById('special');
if (c.classList.contains('selected')) {
    p.className += " marged";
}
</script>
    </body>
</html>

How to apply CSS to a block element in a particular menu window?

1 Answers1