Having difficulty getting a class to override a div

HTML & CSS
1

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">
  <li>
    <a class="item">My Link</a>
  </li>
 </ul>
</div>

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

2

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.

3

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

4

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.

Thanks!

5