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.

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) — Bjarke Handsdal, Mar 03 '18 at 16:51
*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**. — connexo, Mar 04 '18 at 08:08

score 5 · Answer 1 · answered Mar 04 '18 at 07:49

5

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

answered Mar 04 '18 at 07:49

Sujan Sundareswaran

2,324
2
11
25

Sass select parent if child has a specific class

1 Answers1