5

Possible Duplicate:
Complex CSS selector for parent of active child

I have the following code:

<li>
  <a href="jsfiddle.net">Text</a>
</li>
<li>
  only text
</li>​

I have applied css to li element as:

li {list-style-type: circle;}

I want that the element li on hover should have list-style-type:disc, but only if it has an anchor element inside it. I know its a cakewalk using javascript, but is it possible to achieve this without javascript?

I have tried something like this, but could not achieve it: http://jsfiddle.net/k5SQe/

Improve this question
0

2 Answers 2

Reset to default
3

There's no "parent" selector in CSS. You cannot add a circle style to a <li> element, with the given requirements.

Though, it's possible to add the bullet to the anchor : http://jsfiddle.net/k5SQe/31/

li:hover a {
    display: list-item;
    list-style-type: disc;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

thanks Rob for replying. But the extra margin-left causes two bullets to appear which does not look good.
@Ankit The margin was just an example. Adjust it to fit your needs.
I tried changing margin values, but if I give 0em , it does not display at all. Seems like it's not possible using CSS alone :( .. anyways +1 for your efforts.
Check this screenshot i46.tinypic.com/5nngub.png . I am able to see 2 bullets on hover.
@Ankit I've updated my answer. Your original demo didn't contain a <ul> or <ol>. I've added it, and the solution works, without having to modify the margin.
0

Depending on your circumstances, add a class to <li> elements that contain links.

http://jsfiddle.net/k5SQe/10/

Improve this answer

2 Comments

if I were to have a class selector, I would not have posted this query probably :) .. anyways thanks for your reply.
No problem, best to check. Glad you found the solution!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.