how can i change the following cs into one CSS CLASS

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

a:link,a:visited
{
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

a:hover,a:active
{
    background-color:#7A991A;
}

source

http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advanced

reason

• i would like to apply the above styles to a link button, was id changes by browsers wish(which is kind of a requirement so cannot keep selection on "id" on link button

  • so can i convert the above to a css class and then assign it to a link button, keeping intact the visited hover active styles?

Real Reason

• The ul-li-linkbutton (navigation bar structure开发者_开发问答) to the left must change according to the css styling
• the ul-li-linkbutton to the top placed must not.

how to make this possible?

---

In the code above, you are applying different styles to different elements. The only way you can combine classes is if you apply all styles to all elements. If you need to mix and match, you must have separate classes.

Although, you could move most of your a:link,a:visited rules into the ul class definition.

---

    <ul id="one_ul">
<li>
    <asp:LinkButton ID="LinkButton1" runat="server" 
        onclick="LEFT_LINKBUTTON_CLICKED" CssClass="on_li">Products</asp:LinkButton>
        </li>

        <li>
    <asp:LinkButton ID="LinkButton2" runat="server" 
        onclick="LEFT_LINKBUTTON_CLICKED" CssClass="on_li">Upload a File</asp:LinkButton>
        </li>
</ul>

css

body {
}

#one_ul
{
list-style-type:none;
margin:0;
padding:0;

}

.on_li:link, .on_li:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

.on_li:hover, .on_li:active
{
background-color:#7A991A;
}