Div inside a list item (ul li ) keeps breaking the styling

Question

I'm trying to fit a div inside a list item where the tree structure looks like this:

<ul>
<li>
<div class="myclass">
<a href="#">
<img />
</a>
</div>
<a href="#">
<img /> </a>
</li>
</ul>

this list becomes several lists inside eachother goes several levels down, so you have ul's inside ul's. The problem is that the contents of the myclass div's link styling is not being picked up by css, but rather the "li a" styling. How do i force it to not lump the two links and images together? Putting them in a class seems not be working.

Here's the css:

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;

}

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

Keeps getting overridden by:

ul > li ul li a {
height: 20px;
display: block;
line-height: 20px;
vertical-align: middle;
float: left;
color: #444;
font-size: 1.1em;
}

ul > li ul li img {
width: 20px;
height: 20px;
display: block;
float: left;
padding-right: 10px;
}

To clarify the question is basically, how do i keep styling of div's content to work, and not pick up the styling of the li's its inside of.

Answer 1

It may not be the only source of issues you're having (I'm not sure of the final effect you're after), but both of your CSS rules are incorrect. The first:

.myclass > a#mylink {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

The 'a#mylink' matches an 'a' tag with an id of 'mylink'. No such tag exists in your document. You may just mean the 'a' immediately under <div class="myclass">:

.myclass > a {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
}

The second rule:

.myclass > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

The '>' character implies "an img that is immediately under an element with class 'myClass'". However, your HTML has an 'A' tag between the two. Try altering this to:

.myclass > a > img{
    width: 10px;
    height: 10px;
    display: block;
    float: right;
}

Answer 2

[Edit - the below answers the original question, not the edited version. I've left it here as I feel it may still add some value to the topic generally]

Your CSS can be more specific than just 'li a' if required. For example, you could have the following structure:

<ul class="top">
    <li>
        <a> ... </a>
        <ul>
            <li>
                <a> ... </a>

The following CSS will, as you note, be applied to all 'a' tags:

li a { }

However, this one will only apply to those immediately under the top UL:

ul.top > li > a {  }

I'd recommend reading up on the selection patterns available within CSS; there's a wide variety out there that a single StackOverflow answer can only touch upon.