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>