CSS Styling lists that contain links - css

Question

Morning Guys,
I have a CSS issue that's driving me up the wall. I have an unordered list with custom bullet images:
.mainTable ul {
list-style-position: inside;
list-style-image: url(../img/bullet_white.png);
line-height: 18px;
color: #335;
}
Now some of these list items contain links and some do not. For the ones that do, I'd like the bullet to change on rollover. Not too tricky you'd think... Here's how I marked it up:
.mainTable ul li a:link {
padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
list-style-image: url(../img/bullet_red.png);
padding-left:2px; // padding changes (moves link text), but bullet's still white
}
Now I've sussed (as the padding changes) that the styling is being applied to the inner link, and not the "li" container. I tried testing:
.mainTable ul li:hover
and the image changes, but it changes for all "li" tags in scope (because that's what I've told it to do), but that's not what I'm after. There must be a simple way of doing this without resorting to js but I'll be buggered if I can figure it out.
Any suggestions? All help (even if it's just "You need to use js you nugget") gratefully appreciated :)
Danny
GOT IT SORTED! (can't answer my own question yet - for some reason...)
Thanks for the heads up guys. The answer is a mixture of the above suggestions. Moving the bullets from the li tags and on to the anchors worked a treat, but the list items without the link got no bullet...DOH!
I then set up another class, "notALink", and stuck my default list styling on it. Here's the Markup if anyone's interested...
.mainTable ul { /* kill formatting on the ul */
list-style-position: inside;
line-height: 18px;
color: #335;
list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
list-style-image: url(../img/bullet_white.png);
list-style-position: inside;
display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
list-style-image: url(../img/bullet_red.png);
}
Works fine - Cheers peeps, you've dug me out of a little hole I was digging myself
Danny

Answer 1

No, there is no way to change parent on child hover in pure CSS (2 or 3). See: Is there a CSS parent selector?
So you have two options:
Use JavaScript
or
Leave list style as empty and add bullets to childs (a or something else). That way, you will change style of a, not li.
This is what I would do;]
or (from Yi Jiang comment)
Add extra class to li elements containing a

Answer 2

What you can do is style the a as display: block and move it to the left (using negative margin) to cover the li:s bullet. Check this fiddle:
http://jsfiddle.net/TG5Lj/
You may need to set a background-color to the a as well if your a:s background-image doesn't completely cover the li:s.

Answer 3

Try applying styling to
.mainTable ul li:hover li
or something like that. It should override the rule for the parents.
EDIT: Sorry, I didn't fully understand your question. It seems to me that it's impossible to do with css as you would have to apply styling to "a li that has no 'a' descendants", which I don't think can be expressed in css selectors. As a walkaround in order not to use scripts I suggest that you change the background of the link and not the bullet image.