title: Exclude jQuery From Specific Div Using CSS
body: <p>The site uses this js which breaks the search-form input fields added within the site-branding div</p>
  
  <pre><code>/**
   * Remove all off-canvas states
   */
   function removeAllFocusStates() {
      'use strict';
  
      var siteBranding = document.getElementsByClassName('site-branding')[0];
      var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
      var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
      var i;
      var o;
  
      for (i = 0; i &lt; getFocusedElements.length; i++) {
          getFocusedElements[i].blur();
      }
  
      for (o = 0; o &lt; getFocusedClassElements.length; o++) {
          deleteClass(getFocusedClassElements[o], 'is-focused');
      }
  }
  </code></pre>
  
  <p>Here's the HTML output for the site-branding container</p>
  
  <pre><code>&lt;div class="site-branding"&gt;
      &lt;form role="search" method="get" class="search-form" action="http://dev.local/"&gt;
          &lt;label&gt;
              &lt;span class="screen-reader-text"&gt;Search for:&lt;/span&gt;
              &lt;input type="search" class="search-field" placeholder="Search …" value="" name="s" /&gt;
          &lt;/label&gt;
          &lt;input type="submit" class="search-submit" value="Search" /&gt;
      &lt;/form&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Update</strong> : Here's the <strong>removeAllFocusStates()</strong> function in use which needs modifying to exclude the <strong>search-form</strong></p>
  
  <pre><code>  ...
    document.addEventListener('click', function(event) {
  
        // Remove all focused menu states when clicking outside site branding
        if (event.target !== document.getElementsByClassName('site-branding')[0]) {
            removeAllFocusStates();
        } else {
            // nothing
        }
  
    }, false);
  }
  </code></pre>
  
  <p>Users cannot enter text in the search input field because the js is modifying default input field.</p>
  
  <p>Is there a way to use CSS to fix this so it doesn't apply to the search-form input field added within the site-branding div within the header?</p>
  
  <p>Otherwise, is there a way to modify the js so it doesn't effect the search-form?</p>
  
  <p>I did search the similar questions however couldn't find anything which applies specifically to this problem.</p>