CSS Styling lists that contain links

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

You need to use js you nugget! or alternatively, change whatever server-side code you have to add a class to the `li`s that have anchors in them. — Yi Jiang, Feb 28 '12 at 12:22
Edited OP to provide my answer. I created a class and I add this via PHP where the list element has no link... Cheers! — allnodcoms, Feb 28 '12 at 13:12
hmmm, or you could just use ``padding-left + background-image`` and ``a`` for link and ``span`` for no-link ;] — Adam Jurczyk, Feb 28 '12 at 14:59

score 1 · Accepted Answer · edited May 23 '17 at 10:34

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

edited May 23 '17 at 10:34

Community

1
1

answered Feb 28 '12 at 12:17

Adam Jurczyk

2,123
11
16

Cheers Adam, guess I was looking at this the wrong way round - I like option b) as well. Obviously need more coffee... – allnodcoms Feb 28 '12 at 12:34
While this is a good solution (styling `span` instead of `a` for unlinked items) it's not entirely necessary to add another element (or class). – powerbuoy Feb 28 '12 at 12:36
yeah, i always loved hacks just to don't put these few extra spans ;] – Adam Jurczyk Feb 28 '12 at 12:45
Thanks Guys - sorted it. Can't answer my own question, so edited the original post.. – allnodcoms Feb 28 '12 at 13:07

score 0 · Answer 2 · answered Feb 28 '12 at 12:34

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.

Primary Key · Answer 3 · 2012-02-28T12:44:59.613

-1

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.

edited Feb 28 '12 at 12:44

answered Feb 28 '12 at 12:15

Primary Key

1,209
9
14

So you suggest adding another list? or what? This example wont help. – Adam Jurczyk Feb 28 '12 at 12:20
True, this just turns it into a recursive problemm ;o) – allnodcoms Feb 28 '12 at 12:46

CSS Styling lists that contain links

3 Answers3