title: How can I style an element when its previous sibling has a particular class?
body: <p>I want to add border in content of accordion  <code>accordion-content</code> class when accordion <code>button.accordion.is-open</code> is opened. Is it possible via pure CSS?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setTimeout(function(){
      
  const accordionBtns = document.querySelectorAll(".accordion");
  
  accordionBtns.forEach((accordion) =&gt; {
    accordion.onclick = function () {
      this.classList.toggle("is-open");
  
      let content = this.nextElementSibling;
  
      if (content.style.maxHeight) {
        //this is if the accordion is open
        content.style.maxHeight = null;
      } else {
        //if the accordion is currently closed
        content.style.maxHeight = content.scrollHeight + "px";
      }
    };
  });
  
  }, 200); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button.accordion {
    width: 100%;
    background-color: whitesmoke;
    border: 1px solid #333;
    outline: none;
    text-align: left;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s linear;
  }
  
  button.accordion:after {
    font-family: "Font Awesome 5 Free";
    content: "\f067";
    font-size: 18px;
    float: right;
    font-weight: 900;
  }
  
  button.accordion.is-open:after {
    content: "\f068";
    font-weight: 900;
  }
  
  button.accordion:hover,
  button.accordion.is-open {
    background-color: #ddd;
  }
  
  .accordion-content {
    background-color: white;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="accordion"&gt;Show Solution&lt;/button&gt;
  &lt;div class="accordion-content"&gt;
  &lt;p&gt;
  kmax, kmin = k.max(), k.min()&lt;br /&gt;
  k_new = (k - kmin)/(kmax - kmin)
  &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>