CSS syntax issue 2

[Sleidia]

Hi guys,

As you can see below, I have a div (#navleft) with formatted A tags.

The default look and the rollover works as expected but I can't make "ispage" work.

"ispage" is present only in the link of the page in use.

Whatever I do, "ispage" shows the same apearance as the default one. It's not taken into account.

I bet it's the syntax that isn't correct

Thanks for any help !

#navleft a {
vertical-align: top;
float: left; 
width: 140px;
text-decoration: none;
background-image: url({_layout_images_}/nav_left_img_off.gif);
background-repeat: no-repeat;
padding: 0px 0px 6px 22px;
}

#navleft a:hover {
background-image: url({_layout_images_}/nav_left_img_on.gif);
}

.ispage a {
background-image: url({_layout_images_}/nav_left_img_on.gif);
}

<div id="navleft">
<a href="">link</a>
<a href="">link</a>
<a href="" class="ispage">link</a>
<a href="">link</a>
<a href="">link</a>
</div>

 

[traingamer]

Try

a.ispage

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Sleidia]

Thanks traingamer ... but it didn't work

At least, you inspired me into doing something else that did work actually :

#navleft a.ispage {
....
}

 

[traingamer]

How strange - it worked for me. But glad to help, in any case.

 

[Sleidia]

Maybe it's a browser thing.
I've tested it on firefox and ie.

Thanks again for the help

 

[Vragabond]

traingamer's code did not work in your example because of specificity. To make things easier, by default css is parsed from top to bottom -- so a declaration that is lower in the code will overwrite the one that is higher. But only if they are of the same specificity. If the higher one is of higher specificity, then the higher one will prevail. So, how to understand specificity? Check the W3 page on specificity and then one of the pages explaining it to see how it is calculated. A good way to see the actual effects of specificity is Gecko's built-in DOM Inspector. Simply click on an element, check the css for that element and you will see in what order the declaration are applied to it. The lower are either lower in the code (denoted by the line number) or have higher specificity.