I would like to use the following to target the last link (a) of the last ul inside my div. So this is what came to mind:
#menu ul:last-child li a {
/*.....*/
}
I cant manually add a class to that element, and even if i wanted to do it dynamically i would still have to target the element the above way.
Any ideas why this is not working?
Thanks!
I'm only guessing what your HTML is, but:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
div ul:last-child li:last-child a:last-child {
background-color: red;
}
</style>
</head>
<body>
<div>
<ul><li>First list</li></ul>
<ul><li>Second list</li></ul>
<ul>
<li>Item 1</li>
<li>
<a href="#">First Link</a>
<a href="#">Last Link</a>
</li>
</ul>
</div>
</body>
</html>
If you want the last link in the last ul (assuming the link is inside a li-element), this is what you want:
#menu ul:last-child li:last-child a {
/*.....*/
}
#menu returns the menu element. ul:last-child returns the last ul within #menuli:last-child returns the last li within that ulHaven't tried it, but i guess this would work.
I've tested your code in safari (4.0.3) and firefox(3.5.4) and all works fine, I don't know in IE8!
Consider that this is a new pseudo-class (selector) defined in the CSS3 standard that is not completely supported from all browsers and is unsupported by the oldest browsers!
As general rule, for performance reasons, I suggest you to avoid CSS directives with more than 2 level (maximum 3 if you really need it)!
However, I think that if you don't want to apply the style directly to a tagged element, you have to find a javascript solution!