Inheritance in CSS? Possible to do this without copy and paste?

Question

Hi, I'm trying to follow the nifty tutorial at http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery and well, it hit me that I'm trying to use jquery's CSS for theming.. So if I have a menu like

<ul id="AVPNav">
  <li><a href="#">Agfdts</a>
    <ul>
      <li><a href="~/Apfgsdfg.aspx?node=add">Add</a></li>
      <li><a href="~/Agfdsgpx?node=find">Find</a></li>
    </ul>
  </li>
  <li><a href="#">Repdfsgs</a></li>
  <li><a href="#">Ssdfgrt</a></li>
  <li><a href="#">Adgfdminisgfdon</a></li>
</ul>

Well, instead of using custom colors and such, I'd like to use .ui-state-default and .ui-state-hover

How would I use these classes without copy and pasting them into my own custom css class based on AVPNav?

Also, I'm looking for a pure css/html solution, but some light jquery use would be ok if it is the only way.

Answer 1

CSS does not support this.

You must define the CSS yourself, or include the jquery CSS files in your application.

Answer 2

You can asssign class to DOM element only by hands or via javascript.

Answer 3

There is no such thing as inheritance in CSS - even the inherit attribute value refers to DOM-level inheritance, not inheritance of CSS selectors.

Having said that, the ability to apply multiple classes to a single element is usually perfectly sufficient for most people:

<li id="someItem" class="someClass ui-state-default"> ...

If that won't work for you, then I'm afraid it's time for some CTRL+C, CTRL+V.