CODEWITHSUNDEEP
htmlcss
Pradyut Bhattacharya
Pradyut Bhattacharya

Reputation: 5748

not able to apply css rules to parent elements only

I m having a list with ul and li s.

Now I want to apply a css rule to the parents only and not to the children.

For this I'm using the > symbol but that is applied to the children as well.

The example here

The code I used at the css - 

#nav > li a {
    padding-bottom: 30px;
}

The html being - 

 <ul id="nav">
    <li>
        <a href="#" title="Return home">Home</a>
    </li>
    <li>
        <a href="#" title="About the company">About</a>
        <ul>
            <li><a href="#">The product</a></li>
            <li><a href="#">Meet the team</a></li>
        </ul>

    </li>
    <li>
        <a href="#" title="The services we offer">Services</a>
        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>         
        </ul>
    </li>
    <li>
        <a href="#" title="Our product range">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>
            <li><a href="#">Small product (two)</a></li>                
        </ul>
    </li>
    <li>
        <a href="#" title="Get in touch with us">Contact</a>
        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>
        </ul>
    </li>
</ul>

Upvotes: 0

Views: 105

Answers (2)

wec
wec

Reputation: 235

As of CSS3, there is no way to select an element based on its children. I think that something like that is coming in CSS4, but I'm not sure.

Small note: the > selector selects only the children, not the parents and the children.

Upvotes: -1

Explosion Pills
Explosion Pills

Reputation: 191749

I think you want to use #nav > li > a which covers a children of the <li>. Otherwise any <a> descendant of the <li> is also selected (which is everything).

Upvotes: 2

Related Questions