Question

i am facing a very strange problem. From what i understand by the CSS “>” than selector is that it basically applies style to the direct childs only. But i am not able to get the styles applied to the elements at all. What’s strange is while inspecting the elements i can see the other CSS part in firebug but i can’t see the “>” styles applied.

HTML i have is :

<div id="navigation">
    <ul>
       <li><a href="#">First</a></li>
       <li><a href="#">Second</a></li>
       <li><a href="#">Third</a></li>
       <li><a href="#">Fourth</a></li>
    </ul>
</div>

The CSS part is this:

/* Navigation */
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

#navigation > ul > li > a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation > ul > li.current_page_item > a, 
#navigation > ul > li.current_page_parent > a, 
#navigation > ul > li.current_page_ancestor > a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}

all other style is being applied as it normally would, but the style blocks that use “>” selector are not being recognized at all. So say suppose if i inspect the li element, i am able to see the following style applied:

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
}

But i can’t see the following style applied:

#navigation > ul > li {
    line-height: 26px;
    display: block;
}

even though it is a direct child of the ul. Has anyone faced this problem before ? What might be causing this ?

Answer 1

Assuming that the HTML example you provided is the full piece of code that you’re trying to apply these styles to, I don’t see how there could be any conflicts occurring to warrant using the direct descendant selector (>).

Just use the child selector for the whole thing.

/* Navigation */  
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
    line-height: 26px;
    display: block;
}

#navigation ul li a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation ul li.current_page_item a, 
#navigation ul li.current_page_parent a, 
#navigation ul li.current_page_ancestor a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}