how to prevent links from styling their children

Question

I'm re-developing a website and I'd like to have simple links in the menu, so that the user can open them in new tabs, a menu item looks like this at the moment:

<li class='menu-left-row' id='messages' onclick=\"javascript:showscreen_load('messages.php?sel=overview','messages','menu-left')\">
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    Messages
    </div>
</li>

now what i set up a function that intersepts all links with the class 'toggle_reconstruct' and so i'd like to have it rather something like this:

<li class='menu-left-row' id='messages'>
    <div class='menu-left-picture'>
    <img src='IMG/menu-left-messages.png'>
    </div>
    <div class='menu-left-item'>
    <a class='toggle_reconstruct' href='/messages/'>Messages</a>
    </div>
</li>

but now the link is styling the text of the menu item, in this case "messages" becomes bold and blue. there will be lots of other menu items with a lot of different styles, is there any way to prevent the link from styling its content?

UPDATE: someone just pointed me to use:

a:link {font-weight:inherit; color:inherit;text-decoration:none;} 

would this be a valid option?

Answer 1

You can either move the div outside of the a tag or apply a class to it and give it a custom style (overriding the style given by the link). So in this case, you might want to add some CSS to the menu-left-item class so it looks like however you want.

Answer 2

You can use the direct descendant sign in CSS to prevent styling from cascading past the first level

.nav > li {background-color: #ccc;}

Will not work on IE6

Answer 3

just add a style like this:

<style>
a.toggle_reconstruct {
  color: #000000;
  text-decoration: none;
}
</style>

Is this what you want to achieve?

Answer 4

You can prevent the children from inheriting by two ways.

Adding a class:

If you have a nested list, then this would be a problem. You wanna give a background for the main list but not the sublist, then give the main list a class.

<ul class="nav">
    <li class="main">Home</li>
    <li class="main">
        About
        <ul>
            <li>Products</li>
            <li>Contact</li>
            <li>Corporate</li>
    </li>
<ul>

And the CSS as:

.nav .main {background-color: #ccc;}

By specificity operator:

<ul class="nav">
    <li>Home</li>
    <li>
        About
        <ul>
            <li>Products</li>
            <li>Contact</li>
            <li>Corporate</li>
    </li>
<ul>

And the CSS as:

.nav > li {background-color: #ccc;}

Note: The specificity method doesn't work in IE 6!

Hope this helps. :)