nth-child Playground

Spiele mit der Css nth-child rum und sehe was möglich ist

Der hier verwendete Code

<html> <head> <style> body { background: #83d0c9; color: #102a28; height: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; } pre { background: rgba(255, 255, 255, 0.5); padding: 1.5rem; border-radius: 0.3rem; } h1, h3 { margin-bottom: 1rem; } #container { width: 100vw; height: 100%; display: flex; flex:1 1; padding: 3rem 2rem; } #container .selectors { width: 15%; } #container .selectors div span { cursor: pointer; padding: 0.5rem; margin: 0.2rem 0rem; transition: all 0.3s; border-radius: 0.3rem; display: block; } #container .selectors div span.active { background-color: rgba(255, 255, 255, 0.5); } #container .selectors div span:hover:not(.active) { background-color: rgba(255, 255, 255, 0.3); } .demo-container { padding: 0 3rem; display: flex; flex-direction: column; flex:1 1; } .demo-container .code { font-size: 1.1rem; } .demo-container .container{ list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); height: 100%; grid-gap: 1rem; font-size: 1.4rem; } .demo-container .container span, .demo-container .container div { display: flex; justify-content: center; align-items: center; transition: background-color 0.3s; background: rgba(255, 255, 255, 0.1); } .demo-container .container div { border-radius: 50%; } </style> </head> <body> <div id="container"> <div class="selectors"> <h1>Selectors </h1> <div> <h3>:nth-child()</h3> <span data-code="span:nth-child(2n)">Specific</span> <span data-code="span:nth-child(n+5)">Positive range</span> <span data-code="span:nth-child(-n+9)">Negative range</span> <span data-code="span:nth-child(n+4):nth-child(-n+8)">Generic Ranges</span> <span data-code="nth-child(n+2):nth-child(odd):nth-child(-n+9)">Advanced Generic Ranges</span> <h3>:nth-of-type()</h3> <span data-code="span:nth-of-type(3)">Specific</span> <span data-code="span:nth-of-type(n+3)">Positive Type Ranges</span> <span data-code="span:nth-of-type(-n+4)">Negative Type Ranges</span> <span data-code="span:nth-of-type(n+3):nth-of-type(-n+6)">Generic Type Ranges</span> </div></div> <div class="demo-container"> <div class="code"> <pre id="coo" contenteditable> <code class="css" >span:nth-child(-n+9)</code> </pre> </div> <div class="container"><span style="transition-delay: 0s;">1</span><span style="transition-delay: 0.01s;">2</span><span style="transition-delay: 0.02s;">3</span><span style="transition-delay: 0.03s;">4</span><span style="transition-delay: 0.04s;">5</span><span style="transition-delay: 0.05s;">6</span><span style="transition-delay: 0.06s;">7</span><span style="transition-delay: 0.07s;">8</span><span style="transition-delay: 0.08s;">9</span><span style="transition-delay: 0.09s;">10</span><span style="transition-delay: 0.1s;">11</span><span style="transition-delay: 0.11s;">12</span><span style="transition-delay: 0.12s;">13</span><span style="transition-delay: 0.13s;">14</span><span style="transition-delay: 0.14s;">15</span><span style="transition-delay: 0.15s;">16</span><span style="transition-delay: 0.16s;">17</span><span style="transition-delay: 0.17s;">18</span><span style="transition-delay: 0.18s;">19</span><span style="transition-delay: 0.19s;">20</span><span style="transition-delay: 0.2s;">21</span><span style="transition-delay: 0.21s;">22</span><span style="transition-delay: 0.22s;">23</span><span style="transition-delay: 0.23s;">24</span><span style="transition-delay: 0.24s;">25</span><span style="transition-delay: 0.25s;">26</span><span style="transition-delay: 0.26s;">27</span><span style="transition-delay: 0.27s;">28</span><span style="transition-delay: 0.28s;">29</span><span style="transition-delay: 0.29s;">30</span></div></div></div> <script> var co=document.getElementById('coo'); co.addEventListener('keyup',function(){ // document.querySelector('.code pre').innerHTML=`${a.getAttribute('data-code')}{ // background:red; // }`; console.log(co.innerHTML) kill(); setzen(co.innerHTML); }) var ele=document.querySelectorAll('.selectors span'); ele.forEach(function(a){ a.addEventListener('click',function(){ document.querySelector('.code pre').innerHTML=`${a.getAttribute('data-code')}`; console.log(a.getAttribute('data-code')) kill(); setzen(a.getAttribute('data-code')); }) }) function setzen(a){ try{ const c=document.querySelectorAll('.container '+a); c.forEach(function(d){ d.style.background='red'; }) }catch(err){console.log('TRY '+err)} } function kill(){ var ele1=document.querySelectorAll('.container span'); ele1.forEach(function(aa){ aa.setAttribute('style','') }) } </script> </body>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!