Forum Moderators: not2easy
I have a small CSS issue that I thought I share with you to try and get some help -
I've got a navigation that looks like this:
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>Service</a></li>
<li><a>Products</a>
<ul>
<li><a>Prod 1</a></li>
<li><a>Prod 2</a></li>
</ul>
</li>
<li> ... </li>
</ul>
</div>
I've applied a style to the links to have a background image on the left and centered.
On hover, focus and active the link color changes and the image is swapped for the same in a different color.
I have also added the same style to the page link - i.e. if on home page the link looks as if you had your focus / mouse over it
So in my stylesheet I have (simplified)
#nav ul li a{
color: black;
background: black image
}
#nav ul li a:focus, #nav ul li a:hover, #nav ul li a:active, #nav ul li#selectedlink{
color: red;
background: red image
}
This works fine for all the pages except when on the main product one, because then the style 'red' is applied to the inner list element (Prod 1 and Prod 2).
Any idea how I could get round this?
Cheers
Leo
#nav ul li ul li {
/* style for list item in nested list here */
}
#nav ul li ul li a {
/* style for link in list item in nested list here */
}
Hope that helps.
Yep I had done that but the stlye still 'cascades' on inner li
Leo
the stlye still 'cascades' on inner li
Span's selector code will allow you to target styles to the inner list without effecting the outer list, but styles from the outer list will still cascade down to the inner. You can use Span's code, however, to reset styles for the inner list back to default (or whatever setting you want) while leaving the outer list as is.
For instance, say you styled the link text color for the outer list to be red with a hover effect of removing the underline...
ul li a:link {
color:red;
}
ul li a:hover{
text-decoration:none;
}
This does what you want, but also makes the inner lists links behave the same way (because they, too, match the selector pattern of an A in a LI in a UL). If you want the inner lists to have the default settings of blue links with a persistent underline, you use Span's code like this...
ul li ul li a:link{
color:blue;
}
ul li ul li a:hover{
text-decoration:underline;
}
These styles will override the cascading styles from the first set and set the inner list back to normal while the outer list remains red and un-underlined on hover.
cEM
thanks for that - although it didn't work either I did sort my problem by creating a new style and span-ning the li text, therefore instead of applying the style to all the parent and child it stayed with the parent.
Leo
Feel free to ignore this, as you said you've solved the problem. I just get hung up on this stuff. ;)
cEM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#nav ul li a{
background: yellow;
}#nav ul li a:focus, #nav ul li a:hover, #nav ul li a:active, #nav ul li#selectedlink{
background: blue;
}
#nav ul li ul li a{
background:red;
}
#nav ul li ul li a:focus, #nav ul li ul li a:hover, #nav ul li ul li a:active, #nav ul li ul li#selectedlink{
background:green;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>Service</a></li>
<li><a>Products</a>
<ul>
<li><a>Prod 1</a></li>
<li><a>Prod 2</a></li>
</ul>
</li>
<li> ... </li>
</ul>
</div>
</body>
</html>
cEM
here's you code modified to suit the pb I had,
I think I did everything that I intended to do on my own page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#nav ul li a{
background: yellow;
}#nav ul li a:focus, #nav ul li a:hover, #nav ul li a:active, #nav ul li#selectedlink{
background: blue;
}
#nav ul li ul li a{
background:red;
}
#nav ul li ul li a:focus, #nav ul li ul li a:hover, #nav ul li ul li a:active, #nav ul li ul li#selectedlink{
background:green;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>Service</a></li>
<li id="selectedlink">Products
<ul>
<li><a>Prod 1</a></li>
<li><a>Prod 2</a></li>
</ul>
</li>
<li> ... </li>
</ul>
</div>
</body>
</html>
And here's what I did to fix it:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#nav ul li a{
background: yellow;
}#nav ul li a:focus, #nav ul li a:hover, #nav ul li a:active, #nav ul li#selectedlink, #selectedlink{
background: blue;
}
#nav ul li ul li a{
background:red;
}
#nav ul li ul li a:focus, #nav ul li ul li a:hover, #nav ul li ul li a:active, #nav ul li ul li#selectedlink{
background:green;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>Service</a></li>
<li><span id="selectedlink">Products</span>
<ul>
<li><a>Prod 1</a></li>
<li><a>Prod 2</a></li>
</ul>
</li>
<li> ... </li>
</ul>
</div>
</body>
</html>
Thanks for the help.
Leo
ul li ul li{
}
cant you just do
ul ul li{
}
or is that bad skills?
cant you just do
ul ul li{
}
or is that bad skills?
Which to use is primarily a matter of opinion. Because of the way descendant selectors work, either one will do the job just fine.
By using UL LI UL LI, the structure of the selector mirrors that of the markup it's connected to. In my experience, this makes it slightly easier to interpret the CSS at a later date without having the html markup in front of me. But, again, this would really just be a matter of preference.
I don't think either one is technically "better" than the other. There's a tendency in the realm of CSS to sweepingly equate "less" with "cleaner". While this may be true, IMO there is sometimes a worthwhile tradeoff between a few characters and human accessibility.
cEM
