title: Preventing CSS from affecting child views
body: <p>In the context of .NET MVC (but that could also apply to other similar technologies), let :</p>
  <ol>
  <li>A tree of views, e.g the page view <code>FileUploadPage</code> and its child partial view <code>FileDropZone</code> that would have a class identifying their view &quot;type&quot; on their root node :</li>
  </ol>
  <p>FileUploadPage.cshtml :</p>
  <pre><code>&lt;div class=&quot;view-fileuploadpage&quot;&gt;
      &lt;h2&gt;File upload page view&lt;/h2&gt;
      @Html.Partial(&quot;FileDropZone&quot;)
  &lt;/div&gt;
  </code></pre>
  <p>FileDropZone.cshtml :</p>
  <pre><code>&lt;div class=&quot;view-filedropzone&quot;&gt;
      File drop zone partial view
  &lt;/div&gt;
  </code></pre>
  <ol start="2">
  <li>Some CSS rules which I would like to apply only to the view's own elements instead of globally :</li>
  </ol>
  <p>Like this :</p>
  <pre><code>.view-fileuploadpage h2 {
      /* Spécific to the view FileUploadPage */
  }
  </code></pre>
  <p>But <strong>NOT</strong> like this :</p>
  <pre><code>h2 {
      /* Global, not what I want */
  }
  </code></pre>
  <p>I like this way of doing things, because it prevents interferences from other pages in the CSS due to needlessly global selectors.</p>
  <p>However there is a problem with that : the view-specific CSS rules apply to the view's own elements, but also to any other view that is being included as a child view. In the example above, the view <code>FileDropZone</code> inherits the rules that are supposed to be specific to the view <code>FileUploadPage</code>, which is an undesired consequence.</p>
  <p><strong>So my question is : how can I make the CSS rules that are supposed to be specific to my views own elements NOT apply to the child views as well ?</strong></p>
  <p>I could use the &quot;direct child&quot; opeartor in my selectors to specify the full &quot;path&quot; to the elements I want to style, like so :</p>
  <pre><code>.view-fileuploadpage &gt; h2 {
      /* Applies to the h2 of the view FileUploadPage */
      /* DOes NOT apply to any h2 that would exist in a child view of FileUploadPage */
  }
  </code></pre>
  <p>But this would make the code hard to maintain, because the selectors would have to be updated everytime a piece of markup gets moved or modified within a view.</p>
  <p>I'm having the exact same problem with JavaScript and query selectors, but I guess finding a solution for CSS would also solve the JavaScript problem.</p>
  <p>Thank you.</p>