CODEWITHSUNDEEP
csssasstooltipster
S_R
S_R

Reputation: 1998

Sass select parent if child has a specific class

Is there any sort of way to select a parent element in sass if the child contains a certain class?

Basically I am using the tooltipster plugin and have this issue

HTML

<div class="tooltipster-content">
  <span id="note-options">
    <ul>
      <li>Create new note</li>
      <li>Add new edit note</li>
    </ul>
  </span>
</div>

CSS

#note-options {
   //From here, select the .tooltipster-content parent
     ul {
       li {

       }
     }
}

I need to be able to select the .tooltipster-content class based on the id of the span tag.

Tooltipster will always generate with the same HTML structure, but I dont want to change the tooltipster wrapper for all tooltips, I want to do it per each tooltip.

As tooltipster doesn't add your specified id to the parent wrapper for basic CSS editing, the only way I can think of is trying to use the span ID to select the closest .tooltipster-content class.

Is this achievable?

Note - I do not want to use javascript/jquery to fix this, I want to try and achieve it in CSS/SASS.

Upvotes: 9

Views: 7925

Answers (1)

Sujan Sundareswaran
Sujan Sundareswaran

Reputation: 2551

Nope. There's no way in CSS or any preprocessor that you can travel up the dom to select a parent. JS is the only way.

If you have jQuery, you can simply use .parent().

Upvotes: 5

Related Questions