CSS precedence

Somehow, all the browsers will apply ".left-nav .lhs-quick-links ul li a" instead of ".left-nav .lhs-quick-links ul li a.external_icon"

It should be applying ".left-nav .lhs-quick-links ul li a.external_icon" instead.

Please see below.

in the HTML:

<ul class="lhs-quick-links">
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Australian" href="http://www.acara.edu.au/" class="external_icon">Australian</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Chinese" href="http://www.aitsl.edu.au/" class="external_icon">Chinese</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
</ul>

In the CSS:

.left-nav .lhs-quick-links ul li a {
      text-decoration: none;
      color: #41407B;      
      display: block;
      font-family: Helvetica, Verdana, Arial, sans-serif;
      background: url("/images/navigation/arrow.gif") no-repeat scroll 0px 12px transparent;
      /*background: url(/images/buttons/inner_inactive.gif);*/
}

.left-nav .lhs-quick-links ul li a.external_icon {
      background: transparent url("/images/icons/external-link.gif") no-repeat center right;
      padding-right: 12px;
}
jeremyllAsked:
Who is Participating?
 
jonahzonaConnect With a Mentor Commented:
Got it.

Your selectors are wrong.

You have
.left-nav .lhs-quick-links ul li a.external_icon

Open in new window


It should be like this:
.left-nav ul.lhs-quick-links li a.external_icon

Open in new window


Notice the difference?

In the first one you aren't defining the ul class. You are simply defining a class with a ul nested inside of it.

Try it and let me know if it works.
0
 
jeremyllAuthor Commented:
it just started working for no reason. I didn't change the code.

thanks jonahzona thats useful info.

So, what I have:

.left-nav .lhs-quick-links ul li a.external_icon

this would suit this HTML below?
<div class="lhs-quick-links">
<ul>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Australian" href="http://www.acara.edu.au/" class="external_icon">Australian</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
<li>
<a xmlns:manip="http://www.lateralsystems.com/manip" target="_blank" title="Chinese" href="http://www.aitsl.edu.au/" class="external_icon">Chinese</a>
<br xmlns:manip="http://www.lateralsystems.com/manip">
</li>
</ul>
</div>
0
 
jonahzonaConnect With a Mentor Commented:
That is one way to do it. My point was to leave the HTML markup the way it was and just fix your CSS.

Keep in mind if you put <ul class="sample"> that your CSS selector needs to be ul.sample - not .sample ul - those are two totally different animals.

Let me know if you need anything else.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.