basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Spiele mit der Css nth-child rum und sehe was möglich ist

    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>