title: Is it possible to addClass, removeClass based on aria-hidden values?
body: <p>Sorry if my question is too silly or non-relative, but I'm so so newbie in jquery... Anyway, I'm trying to add some background letters (with :before pseudo element) on parent div of slideshow based on aria-hidden values... </p>
  
  <p>This is for an hosted cms (kind of DIY website builder) and I don't have access to the html but only to the head section of the site. Thus in the parent div I have some content (heading, text, button) on the left side and pre-installed slideshow on the right side  - the slideshow has regular structure of ul and li's, however there is no any "active" class on the visible slide - the only change I detect is that all the li's have aria-hidden="true" and the visible one(the active) changes to aria-hidden="false", so I must hang on this... to add my :before pseudo element on the parent. </p>
  
  <p>CSS</p>
  
  <pre><code>        .brandName:before{
                  content: 'BRAND NAME';
                  color: #d2dbdc;
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  -webkit-transform: translate(-50%, -50%);
                  -moz-transform: translate(-50%, -50%); 
                  -ms-transform: translate(-50%, -50%); 
                  -o-transform: translate(-50%, -50%); 
                  transform: translate(-50%, -50%); 
                  opacity: 0.6;
                  font-family: "Lato",sans-serif,"google";
                  font-weight: 700;
                  letter-spacing: 5vw;
                  font-size: 7vw;
                  z-index: -1;
          }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="landing-section"&gt;
  
    &lt;div class="left-side"&gt;
      &lt;h1&gt;Some Heading&lt;/h1&gt;
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;button&gt;Some Button&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="right-side"&gt;
      &lt;div id="cc-m-gallery-7739661064" class="cc-m-gallery-container            cc-m-gallery-slider                                  "&gt;
        &lt;div class="bx-wrapper" style="max-width: 100%;"&gt;
          &lt;div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 583px;"&gt;
                  &lt;ul style="width: 9215%; position: relative; transition-duration: 0s; transform: translate3d(-560px, 0px, 0px);"&gt;
  
                          &lt;li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;" class="bx-clone" &gt;
                                &lt;img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="" style="height: 583.247px;"&gt;
                          &lt;/li&gt;
  
                          &lt;li aria-hidden="false" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;" &gt;
                            &lt;a href="/products/"&gt;&lt;img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="thatBrand is super" style="height: 583.247px;"&gt;&lt;div class="bx-caption" style="width: 533.516px; margin-left: 12px;"&gt;&lt;span&gt;thatBrand is super&lt;/span&gt;&lt;/div&gt;&lt;/a&gt; 
                          &lt;/li&gt;
  
                          &lt;li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;"&gt;
                            &lt;a href="/products/"&gt;    &lt;img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="another brand image" style="height: 583.247px;"&gt;&lt;div class="bx-caption"&gt;&lt;span&gt;another brand image&lt;/span&gt;&lt;/div&gt; &lt;/a&gt; 
                          &lt;/li&gt;
  
  
                          &lt;li aria-hidden="true" style="float: left; list-style: none; position: relative; width: 558px; margin-right: 2px;"&gt;
                            &lt;img src="https://image/path/cms/image.png" data-orig-width="650" data-orig-height="680" alt="" style="height: 583.247px;"&gt;
                          &lt;/li&gt;
  
                  &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried something like this but didn't work... Any ideas??</p>
  
  <pre><code>    $('.cc-m-gallery-slider ul li:has(img[alt*="thatBrand"])').addClass('thatBrand-image');
  
  
           if ( $('li .thatBrand-image').is('[aria-hidden="false"]') ) {
              $('.landing-section').hasClass("brandName");
              $('.landing-section').addClass("brandName");
          } else {
             $('.landing-section').removeClass("brandName");
          }
  </code></pre>