CODEWITHSUNDEEP
javascriptjqueryhtmlcssdetach
purple11111
purple11111

Reputation: 719

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?

Upvotes: 0

Views: 97

Answers (1)

AtheistP3ace
AtheistP3ace

Reputation: 9691

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.

Upvotes: 3

Related Questions