Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 846
S_R Avatar asked Mar 03 '18 13:03

S_R


People also ask

How do you target a child to a parent in CSS?

The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected.

How do you target a class in SCSS?

The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class.

Can CSS be used to find child => parent page element?

There is currently no way to select the parent of an element in CSS in a way that works across all browsers. That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability.


1 Answers

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

like image 105
Sujan Sundareswaran Avatar answered Sep 24 '22 18:09

Sujan Sundareswaran