CODEWITHSUNDEEP
htmlcsscss-selectors
Hank
Hank

Reputation: 2616

How to create CSS rule based on if parent div is display:none

I want to change a style setting via css based on a parent element set to display:none.

Here is the HTML:

<div id="mapLinkDiv" class="nav nav-second-level">
  <table class="NavSurvey" style="width:180px;">
    <tbody>
      <tr>
        <td>
          <a class="fixedResultsLink" href="/QBMapping/QBMap.aspx" title="Map results by State" target="MapByState">Map by State</a>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="NavSurvey" style="width: 180px; margin-top:10px;">
    <tbody>
      <tr>
        <td style="font-size:12px; text-align:center;">Maps are underdevelopment and may not work properly</td>
      </tr>
    </tbody>
  </table>
</div>

So what I would like is to set up a rule that says, if mapLinkDiv is display:none, then remove the padding-left from all tag with class 'fixedResultsLink'

Here is my CSS (on the page) at the moment:

<style>
  a.fixedResultsLink{ 
    padding-left:28px;
  }
  #mapLinkDiv[style*='display:none'] a.fixedResultsLink {
    padding-left:0;
  }
</style>

I have found little to help me figure this out thus far, but entering the wrong criteria into google:)

Just to be clear it is the second CSS rule that I'm working on.

How can I achieve this?

Upvotes: 0

Views: 61

Answers (1)

Jesse Rushlow
Jesse Rushlow

Reputation: 196

#mapLinkDiv[style*='display:none'] a.fixedResultsLink is selecting a #mapLinkDiv with a direct descendant a.fixedResultsLink. The easiest, albeit ugly would be to insert all of the parent tags of the a.fixedResultsLink in the css selector.

#mapLinkDiv[style*='display:none'] table tbody tr td a.fixedResultsLink

Upvotes: 1

Related Questions