Inherit from root in CSS?

Question

The scenario

Let's say I have a sidebar where every box / widget is an li-element (not very uncommon). I have styled these li-elements with colors, paddings, margins fonts and so on.

One or a few of the boxes have their own inner li-element in their content. I don't want to inherit the styles from the box li element.

Another scenario

Let's say I have a page with main content containg paragraphs, lists and headings added with TinyMCE (an editor).

Then there is a "shortcode" within the content, like this: [my_superbox_module] that is replaced by custom content. That custom content contains boxes added with li-elements.

The code might look like this:

<p>My content</p>
<ul>
    <li>My content list item 1</li>
    <li>My content list item 2</li>
</ul>
<p>Another content</p>
<div class="my_superbox_module">
    <ul>
        <li>My superbox 1</li>
        <li>My superbox 2</li>
    </ul>
</div>
<p>Ending paragraph</p>

In this scenario I don't want to add a class to every ul-element because it is the content part, added with a TinyMCE editor.

Can I inherit from root?

Is there a way to inherit the style properties from root OR just clean it and start from scratch.

These things I know already

I can clear the inner li-elements by override their CSS. That adds extra CSS-code.
I can use > selector on the outer li-element to only target one level depth. That don't work well in some cases, for examples with nested boxes (nested li-elements).
I can add a reset-class to the inner li-element. That adds extra HTML-code.

Is there a great solid solution for this?

Add a special class to the li-elements you want to style. When writing CSS, target specific elements and leave the others alone, rather than target the everything and try to negate the effects in some. — approxiblue, Mar 04 '12 at 19:51
@BoltClock Ahhhhh bah humbug `:P`. But of course that doesn't seem to be the "root" the OP is talking about. — Andrew Marshall, Mar 04 '12 at 19:56
@AndrewMarshall Good question. I ment to inherit from html or body. — Jens Törnell, Mar 04 '12 at 20:16
@JimmyX Good point! However I think that fails in my "Another scenario" which I updated my post with. Write again if you have a reply to it. — Jens Törnell, Mar 04 '12 at 20:18
I take it you only want to style the `ul`s inside `.my_superbox_module`. — approxiblue, Mar 04 '12 at 20:57
@JimmyX Yes, that is what I want, without it being inherit whatever styles. — Jens Törnell, Mar 05 '12 at 18:53

score 2 · Accepted Answer · answered Mar 04 '12 at 19:52

2

Why not just use a class? Change your selector in CSS from li to li.sidebar and add class="sidebar" to your li elements.

answered Mar 04 '12 at 19:52

kitti

14,663
31
49

Good point but I think it fails in some cases. Look at my updated post in "Another scenario". I added a code example as well. Reply if you have any more ideas. Thanks! – Jens Törnell Mar 04 '12 at 20:22
So you're saying that you want your style to be applied to every `li` on the site, except those created by modules? – kitti Mar 04 '12 at 21:50
li-element on the content area should be styled as list items, bullets, left margin and so on... BUT the li-elements that are a part of the "module" should not inherit that. – Jens Törnell Mar 05 '12 at 18:55
Then it looks like your only real option will be to set the default style as you are and negate it on the `li` elements in the modules. Which isn't really a good way to do things, but I don't see any other options for you. – kitti Mar 05 '12 at 19:07

Inherit from root in CSS?

1 Answers1