SCSS - exclude specified containers from a set of styles
<p>A problem I've hit many times with ul elements (given the fact that are so often used for semantic purposes and styled dramatically, e.g. top navigation), is that attempting to set general styles for the textual use of ul elements is very fiddly to avoid messing up the other uses, or vice versa. Generally, I solve this problem by just having a dedicated set of styles included within the main page content wrapper, e.g.:</p>

<pre><code>#page-wrapper {
    ul, ol {
        padding-left:1.6em;
    }
}
</code></pre>

<p>But the problem I've hit is that within the main page wrapper, ul elements used for specific purposes (e.g. by plugins like <em>chosen</em>), have their own set of purely cosmetic styles applied. It would be nice to have a clean way of solving this problem. Previously, like back when writing raw CSS, I would have to explicitly re-override the styles again, like:</p>

<pre><code>.chosen-container ul {
    padding-left:0;
}
</code></pre>

<p>But this, especially doing it for every element, seems very messy. I tried the following:</p>

<pre><code>#page-wrapper {
    :not('.chosen-container') {
        ul, ol {
            padding-left:1.6em;
        }
        ........
    }
}
</code></pre>

<p>... but it had the effect of neutralising all ul element styles everywhere.</p>

<p>Has anyone come up with an elegant solution to this? Googling and searching here have so far been fruitless.</p>