Having difficulty getting a class to override a div

I am new here so I apologize if I am missing any info in this post.

I am working with a template and one of the outer divs has a color defined for the link.

<div id="nav">
 <ul class="Level1">
    <a class="item">My Link</a>

The template has this class defined

#nav li a {color:white;}

I have added

.Level1 .item {color:black;}

the color of the link keeps displaying a white. (I am using the hex values for color on my actual page)

How should I define my css to override the template css. Modifying the template is not really an option.

Thanks! - Steven

You probably don’t need the li in the first part. The second part could be #nav .item. Off hand, I think that this will do the job. It may depend on other rules that we can’t see.

Your first rule is overriding the second. If you make that second rule like this:

#nav .Level1 li a {color:black;}

then it should work.

A good aticle explaining all this is DontTrustThisGuy.com | The Art and Zen of Writing CSS

Thanks so much for the reply.

I think I figured it out. It has to do with the rules of Specificity.

I am working on Joomla extension that could be installed in any number of websites that could have lots of different templates and div names. Which is why I had need to be able to override code that the website may already have. So in this instance the div is called nav another template could call the div a different name.

I found this specificty post and realized I needed to have an ID selector included in my statement in order to be able to override the template statement.

by adding an id also included in my code I was able to override the #nav line.

I added:

#headerWrapper .Level1 .item {color: #000000;text-transform: uppercase}

And that gave my statement a higher priority than the statement in the template.

I have some more testing but I think it is solved.