Implementing a parent selector in CSS with jQuery that applies automatically to new elements in DOM

Question

CSS does not support parent selectors, e.g. "select all <p> that contain an <img>".

One solution proposed here is to use jQuery, for example:

$('#parent:has(#child)').addClass('my-special-class');

However, I have a <div> that is periodically updated with new content, and I need to keep reapplying the my-special-class to new elements that match the selector '#parent:has(#child)' inside that <div>.

How could one do that?

I am styling a third-party plugin so I don't have much control over its styling, events and so on.

Why don’t use css class for parent that has direct children your desired parent that contains the img? I mean .wrapper > .parentIMG — Juorder Gonzalez, May 25 '18 at 04:54
This isn't an issue with the parent selector but due to the nature of jQuery selections not being live in general. That is, you'll run into this problem regardless of what selector you use. — BoltClock, May 25 '18 at 04:57
@JohuderGonzalez I don't see how this can be done. Let's say you have two `
` elements: `div > p > img` and `div > p > span`. How do you style the first `p` but not the second `p`? — , May 25 '18 at 05:06

score 2 · Accepted Answer · edited May 25 '18 at 05:14

One solution is to bind the DOMSubtreeModified event on the container div and add your code inside.

$('.container').on("DOMSubtreeModified",function(){
    $('.parent:has(.child)').addClass('special-child');
});

// find elements
var parent = $("#parent")
var button = $("button")

// handle click and add class
button.on("click", function() {
  const el = '<div class="parent"><p class="child">Hello World</p></div>';
  parent.after(el);
})

$(function() {
  $('.parent:has(.child)').addClass('special-child');

  $('.continer').on("DOMSubtreeModified", function() {
    $('.parent:has(.child)').addClass('special-child');
  });

})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.child {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 4px auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.special-child {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="continer">
  <div class="parent" id="parent">
    <p class="child">Hello World</p>
  </div>
</div>
<button>Add Child</button>

`DOMSubtreeModified` has been deprecated in favor of the Mutation Observer API. https://developer.mozilla.org/en-US/docs/Web/Events/DOMSubtreeModified — Jacob Goh, May 25 '18 at 05:21
Using DOMSubtreeModified leads to an infinite loop in Internet Explorer after the second call. Other browsers work fine. — , May 25 '18 at 10:22

score 0 · Answer 2 · answered May 25 '18 at 08:53

If you add the following jquery and just one class, it will work like :visited:

$("div.my-div").click(function(){
    $(this).addClass("visited");
});

And just add one class to the css:

.visited:hover{
  outline: 2px solid orange;
}

If you add this code with the current code of yours, you will get the same functionality as the one for :visited.

Here is a fiddle that I tried on your code:

https://jsfiddle.net/thisisdg/27srmuy6/

Implementing a parent selector in CSS with jQuery that applies automatically to new elements in DOM

2 Answers2