Search code examples
javascriptjqueryhtmlcssdetach

Is CSS going to be disconnected after detach & appendTo in jQuery

Below code is non working code and that does not matter one bit for the purpose of this question. Question below code!

HTML

<body>
  <div class="wrapper">
    <div id="popup1"></div>
  </div>
</body

CSS

.wrapper #popup {
  color: #fff;
}

jQuery

var setpopupoutsidewrapper = $('#popup1');
setpopupoutsidewrapper.detach();
setpopup1outsidewrapper.appendTo('body');

Is the link between the CSS/HTML going to stay intact after the detach/append function?

Solution

  • That CSS selector will no longer apply once popup1 is a child of the body and no longer a child of .wrapper. .wrapper #popup says there is a descendant with id popup1 somewhere below (not necessarily a direct child, use > selector for that) an element with the class wrapper. Once popup1 is a direct child of body that will no longer be true.

    As stated in a comment above you can remove the wrapper portion of the selector and it will continue to apply no matter where popup1 is in the hierarchy.

    #popup {
  color: #fff;
}

    This now only applies to an element with an id of popup1 and none of its ancestors are taken into account.