title: jQuery: Prevent child from inheriting the parent's attributes?
body: <p>With jQuery: How do I prevent the children (<code>&lt;span&gt;</code>) from inheriting the parents' (<code>&lt;p&gt;</code>) attributes? I've been working on and researching this for 2+ hours; nothing has worked.</p>
  
  <p>Problem section:</p>
  
  <p><code>$("p").not("span").css("cursor", "pointer");</code></p>
  
  <p><code>&lt;p&gt;...&lt;span&gt;...&lt;/span&gt;&lt;/p&gt;</code></p>
  
  <p>Full code:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;style&gt;body {font-family:Arial,san-serif;font-size:25pt;}&lt;/style&gt;
  &lt;body&gt;
  &lt;p&gt;Always shown | &lt;span&gt;Show/Hide&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;Always shown | &lt;span&gt;Show/Hide&lt;/span&gt;&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  //Change pointer to a hand:
  $("p").not("span").css("cursor", "pointer");
  //Show &amp; Hide by clicking on "Always shown":
  function handler(event) {
    var target = $(event.target);
    if (target.is("p")) {
      target.children().toggle();
    }
  }
  $("body").click(handler).find("span").hide();
  &lt;/script&gt;
  </code></pre>