On 4/04/2010, at 8:05 AM, Ingo wrote:
> Hi all,
>
> I have several unordered list types coming out of a CMS. For some
> lists,
> I want to define a new bullet. Most lists are wrapped with a div,
> unfortunately the most common (RTE output) is not. I hope there is a
> white list scenario, where I can select only those lists I wanna give
> bullets, but I lack some selector-fu.
>
> <div class="container">
> <div class="want_this">
> <ul>
> <li>foo</li>
> <li>bar</li>
> </ul>
> </div>
> </div>
>
>
> <div class="container">
> <!-- RTE output - want this, no wrapper here -->
> <ul>
> <li>foo</li>
> <li>bar</li>
> </ul>
> </div>
>
>
> <div class="container">
> <div class="dont_want_this">
> <ul>
> <li>foo</li>
> <li>bar</li>
> </ul>
> </div>
> </div>
>
>
> Right now I do:
>
> # generic white list
> .container ul li {background: url(bullet.png) left 5px no-repeat;}
>
> # black list
> .container .unwanted1 li,
> .container .unwanted1 li li,
> .container .unwanted2 li,
> .container .unwanted2 li li {background-image: none;}
>
>
> Not nice, unexpected list types can pop up from any new extension to
> the
> CMS, and need to be blacklisted. Is there a way to select "first-
> level"
> ul li only? I ask for the first selector here:
>
> # specific whitlist
> .container ul li, # make it first level only (don't select if
> wrapped)
> .wanted1,
> .wanted2 {background: url(bullet.png) left 5px no-repeat;
You could use a child selector for this... e.g.
.container > ul li { background: url(bullet.png) left 5px no-repeat; }
.container div ul li { background-image: none }
Note that this won't work in IE6 due to lack of support for this
selector. Or, how about this?
.container div li {background-image: none; }
.container div.want_this li, .container li { background:
url(bullet.png) left 5px no-repeat; }
The fact that you are using 'li li' in your selectors suggests nested
lists but that's not what you indicated above. If you want to nest
lists you should either use descendent selectors and ignore IE6, use
more convoluted CSS to reset each layer of nested list or use
javascript to add class names as appropriate levels.
Cheers, Tim
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
