title: How can I use variables with nth-child selector?
body: <p>when I click on an arrow to the right, I want to hide the first one from a set of 20 tabs (by removing the class &quot;w--tab-active&quot; and show the second one (by adding the class &quot;w--tab-active&quot;). When I click again I want to hide the second one and show the third tab. Obviously I cannot use variables inside the nth-child selector, right? How else could I achieve that goal then?</p>
  <p>This is how my code looks like:</p>
  <pre><code>var tabToHide = document.querySelector('.w-tab-content div:nth-child(1)');
  tabToHide.classList.remove(&quot;w--tab-active&quot;);
  var tabToShow = document.querySelector('.w-tab-content div:nth-child(2)');
  tabToShow.classList.add(&quot;w--tab-active&quot;);
  </code></pre>
  <p>See the code under this url: <a href="https://der-gottwald-de.webflow.io/karussell-test" rel="nofollow noreferrer">https://der-gottwald-de.webflow.io/karussell-test</a></p>