mardi 10 juillet 2018

How to apply style to descendent div based on ancestor div?

Assuming the html structure below I need to override a style in the app-dropdown__trigger__icon class based on the existence of an ancestor with class ancestor-module. I'm using ember so the app-dropdown__trigger__icon and the ancestor-module live in separate modules i.e. I cannot easily reference the ancestor from the child's scss. Is there a way to achieve conditional styling based on an ancestor's class?

<td id="ember1249" class="lt-cell align-center ember-view">
  <div id="ember1254" class="ember-view">
    <div class="ancestor-module">
      <div id="ember1259" class="ember-view">
        <div id="ember1264" class="__app-dropdown__aa494 ember-view">
          <div id="ember1274" aria-owns="ember-basic-dropdown-content-ember1269" tabindex="0" data-ebd-id="ember1269-trigger" role="button" class="app-dropdown__trigger ember-basic-dropdown-trigger ember-view">
            <span class="app-dropdown__trigger__icon">
                                                <i id="ember1275" aria-hidden="true" class="fa fa-house ember-view"></i>
                                        </span>
          </div>
          <div id="ember-basic-dropdown-content-ember1269" class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
</td>



Aucun commentaire:

Enregistrer un commentaire