title: How to control (avoid) styling of nested html elements when using jQuery if classes are not an option?
body: <p>I am working on implementing a dynamic styling functionality in a Wordpress theme using jQuery. I am challenged by the fact that jQuery uses inline styling, which can have the effect that nested elements may get targeted by a selector even though that same selector has no effect in the CSS rules. To illustrate what I mean, please take a look at this <a href="https://jsfiddle.net/stefmldk/wx22zwbt/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
    This is normal text
    &lt;br&gt;
    &lt;br&gt;
    &lt;em&gt;This is italic text&lt;/em&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;strong&gt;This is bold text&lt;/strong&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;strong&gt;&lt;em&gt;This is bold italic text&lt;/em&gt;&lt;/strong&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;em&gt;&lt;strong&gt;This is also bold italic text&lt;/strong&gt;&lt;/em&gt;
    &lt;br&gt;
    &lt;br&gt;
  &lt;/p&gt;
  
  &lt;button&gt;
    Style it!
  &lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p em strong,
  p strong em {
        color: red;
      }
  
  p strong {
    color: blue;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>(function($) {
    $('button').on('click', function() {
      $('p strong').css('color', 'turquoise');
    });
  })(jQuery);
  </code></pre>
  
  <p>As illustrated, CSS styling of the bold text only takes effect on the bold text as expected, but with jQuery - using the same selector, the instance of the bold italic text that has the  tag as a nested tag is also affected.</p>
  
  <p>Is it possible to make a jQuery selection that does not include the nested elements as in the example? Obviously, if I could use classes, the solution would be simple, but I can't in this case. </p>
  
  <p>If I add the !important option to the elements initially styled red, I get what i want, but I would really like to avoid that if at all possible. Thank you.</p>