title: Is it possible to apply a CSS style ONLY if a child class is present?
body: <p>I'm using <code>AngularJS</code> and <code>Cordova</code> (ionic) in a mobile application project, and everything uses the same <code>page</code> perse. Everything is loaded into a single <code>index.html</code> file, so the <code>body, html, ion-view, ion-content</code> elements are all shared between each "page"/"interface"</p>
  
  <p>Basically, all of my interfaces are set up with a unique identifier:</p>
  
  <pre><code>&lt;ion-content id="interface-name"&gt;...&lt;/ion-content&gt;
  </code></pre>
  
  <p>However, in this interface I need to make sure that the following elements have the following styles:</p>
  
  <pre><code>html, body, ion-view, ion-content, .scroll {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>So that the interface can be fullscreen. This is all fine and dandy, but it's causing issues for my other interfaces not being able to scroll/expand vertically.</p>
  
  <p>Is there a way (using CSS) to only apply a style if a child id/class is present, for example the above style is only applied if <code>id="interface-name"</code> is applied to a child element? </p>