list-style-type: none when list items are links and show bullets when the list items aren't links? CSS

If I have a couple of bullet lits on a page and some lists contains normal text (no paragraph elements) and some contains links, is it possible to have no bullets on the links but bullets on the text items?

To remove all bullets I do:

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}

But if the item is a link I want to show the bullets. I tried with:

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ开发者_C百科6 li {margin-left: -25px;}

#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}

Without success, any ideas?

---

You would have to resort to server-side preprocessing or Javascript. There is no way in CSS to style an element based on what its children elements are, or to change a parent's style from a child element's style declaration. Here's the W3 CSS2 Selector Reference and the CSS3 working draft Selector reference, and neither of them mention parent selectors.

---

While you can not change the styling of a list element based whatever element(s) it contains, there is a pure CSS workaround that achieves more or less the same result :

1. Set block as the display property of all of your list elements
2. Set list-item as the display property of your link elements, along with a valid value for list-style-position and list-style-type.

So instead of making your list items look like a list item when they contain a link, you're just making the links inside your list items behave like a list item.

Your bullet will have the same color as your link, but that's about the only difference between this approach and the approach you had in mind (which is impossible).

EXAMPLE CODE :

#WebPartWPQ1 li {
    margin-left: -25px;
    display: block;
}

#WebPartWPQ1 li a {
    display: list-item;
    list-style-position: inside;
    list-style-type: disk;
}

<ul id="WebPartWPQ1">
    <li>Item 1 (ordinary item)</li>
    <li><span>Item 2 (wrapped in a "span" tag)</span></li>
    <li><a href="#">Item 2 (wrapped in an "a" tag)</a></li>
</ul>

---

THE FIDDLE :

http://jsfiddle.net/6kt8jhfo/5/