Marc El Bichon Marc El Bichon - 5 months ago 12
CSS Question

CSS child element selection for html changes

i have two html section:

<div id="signin">
<div class="dialog">
<div class="content">
<div class="header">
<h4>Title</h4>
</div>
</div>
</div>
</div>

<div id="phone">
<div class="dialog">
<div class="content">
<div class="header">
<h4>Title</h4>
</div>
</div>
</div>
</div>


I try to change the h4 element's html with this:

$("#signin > .dialog > .content > .header > h4").html("Sign In");


or

$("#signin > h4").html("Sign In");


but it didn't worked, any idea?

Answer

Remove > from your selector and wrap your code in $(function() { ... }); i.e code should execute when content is fully loaded and ready to be manipulated:

$(function() {
  $("#signin h4").html("Sign In");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="signin">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>

<div id="phone">
  <div class="dialog">
    <div class="content">
      <div class="header">
        <h4>Title</h4>
      </div>
    </div>
  </div>
</div>