<h2>Selector Builder</h2>

<form>
  <span>.doll</span>
  <select name="nth-selector" id="nth-selector">
    <option value="nth-child" selected>:nth-child</option>
    <option value="nth-last-child">:nth-last-child</option>
  </select>
  <span>(</span>
  <select name="nth-count" id="nth-count">
    <option value="even">even</option>
    <option value="odd">odd</option>
    <option value="2n">2n</option>
    <option value="2n+1">2n+1</option>
    <option value="3n">3n</option>
    <option value="3n+1" selected>3n+1</option>
    <option value="3n+2">3n+2</option>
  </select>
  <span> of </span>
  <select name="nth-of" id="nth-of">
    <option value="*">*</option>
    <option value=".big">.big</option>
    <option value=".small" selected>.small</option>
  </select>
  <span>)</span>
  <span>{ … }</span>
</form>

<style id="output">
  .doll:nth-child(3n+1 of .small) img {
    animation: pulsate 2s infinite alternate;
  }
</style>

<h2>Live Output</h2>

<p>💡 Elements that match the built selector will pulsate</p>

<div class="dolls">
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll small"><img src="https://assets.codepen.io/89905/matroshka-02.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
  <div class="doll big"><img src="https://assets.codepen.io/89905/matroshka-01.svg" alt="" title="" width="222" height="184" draggable="false"></div>
</div>

<footer>
  <p>This demo is part of <a href="https://goo.gle/css-wrapped-2023" target="_top">#CSSWrapped2023</a></p>
</footer>

@keyframes pulsate {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1.2);
  }
}

/* Looking for the of syntax? It’s in the HTML markup! */

.dolls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2em;
  user-select: none;
}

.doll {
  width: 240px;
  padding: 1em 1em 0 1em;
  margin: 0 auto;
  position: relative;
  background: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.doll.small {
  --hue-rotate: 350deg;
}

.doll img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  transform-origin: 50% 100%;
}

.doll.small img {
  max-width: 160px;
}

.doll.small {
  counter-increment: small;

  &::after {
    content: "SMALL #" counter(small);
  }
}

.doll.big {
  counter-increment: big;

  &::after {
    content: "BIG #" counter(big);
  }
}

.doll::after {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(100%) translateX(-50%);
  z-index: 2;
}

/* style#output {
	display: block;
	white-space: pre-wrap;
	font-family: monospace;
	
	border-left: 4px solid blueviolet;
	padding: 0.5em 0 0.5em 1em;
	overflow-x: auto;
	margin-bottom: 3rem;
	background: #eee;
	border-radius: 0 0.5rem 0.5rem 0;
} */

html {
  max-width: 90ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
  font-family: "Anybody", sans-serif;
}

form {
  display: flex;
  flex-direction: row;
  font-family: monospace;
  gap: 4px;
  background: #f4f4f4;
  padding: 1em;
  border-left: 4px solid #1601f2;
}

select {
  font-family: inherit;
}

h2 {
  text-decoration: underline;
  text-decoration-color: hsl(156deg 100% 50% / 50%);
  text-decoration-thickness: 0.2rem;
  text-decoration-style: wavy;
  text-decoration-skip-ink: none;
}

h2:not(h2:first-child) {
  margin-top: 4rem;
}

footer {
  text-align: center;
  margin-top: 4rem;
}

// Prevent form submissions
document.querySelector("form").addEventListener("submit", () => false);

document.querySelectorAll("select").forEach(($select) => {
  $select.addEventListener("change", (e) => {
    updateCSS();
  });
});

const updateCSS = () => {
  const selector = document.querySelector("#nth-selector").value;
  const count = document.querySelector("#nth-count").value;
  const ov = document.querySelector("#nth-of").value;
  document.querySelector(
    "#output"
  ).innerText = `.doll:${selector}(${count} of ${ov}) img {
  animation: pulsate 2s infinite alternate;
}`;
};