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?

Answer 1

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