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.
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.
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.
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.
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()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With