Sass select parent if child has a specific class

Question

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.

Hardboiled

I am not sure I understand your issue. If you want to have the selector you could add (if using sass) #note-options { .tooltipster-content { } } if you want the note options to use the same ruleset as tooltipster you could use the buildin mixin @extend (.yourClassName) – Lib

I know this is not achievable in CSS, which is why I have stated I am trying to achieve it with SASS, in which there IS a parent selector (&). Thank you for the input but please read the question correctly. Browsers don't understand SASS, they only understand CSS, So nothing that can't be done in CSS will ever be doable using any pre-processor (which the syllable pre clearly indicates). Also in SASS & is not really a parent selector, it just means replace this with the selector created so far. – Susurrate

Answer 1

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().

Ravo