CSS Selector Change

Question

I have created a html/css template to be used within a CMS.

I have a specific class:

My Template:

<li><a class="signup" href="#">SIGN UP</a></li>

CMS Generated HTML:

<li class="signup last"> 

        <a href="http://hostone.co.nz">SIGN UP</a> 
    </li>

How could I change my CSS so it will work with the li and not the a tag?

CSS:

#mainMenu .signup{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup:hover{
    background-color:#00afd8;
}

If it's acting on the CMS generated markup, then it should already be applied to the li. — fncomp, Jul 09 '11 at 21:10
possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Ross, Jul 09 '11 at 21:11

score 2 · Accepted Answer · answered Jul 09 '11 at 21:09

Assuming you're still trying to apply the rules to the a, use these:

#mainMenu .signup a {
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup a:hover {
    background-color:#00afd8;
}

If you're literally trying to apply them to the li, you don't need to do anything; the li is already being generated with the class.

CSS Selector Change

1 Answers1