css: Come saltare il bambino nascosto in nth-child (dispari) e nth-child (pari)

Question

Sto provando a saltare il bambino nascosto mentre uso nth-child (dispari) e nth-child (pari), ma lo fa non saltare quei record nascosti.

Ho il seguente codice HTML e CSS.

<style> 
 
    ul { 
 
    list-style-type: none; 
 
    } 
 
    li { 
 
    height: 2em; 
 
    border: 1px solid black; 
 
    } 
 
    /* li:not(.hidden):nth-child(odd) { */ 
 
    li:nth-child(odd) { 
 
    background: khaki; 
 
    } 
 
    li:nth-child(even) { 
 
    background: indianred; 
 
    } 
 
    .hidden { 
 
    display: none; 
 
    } 
 
</style> 
 

 

 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li class="hidden">4</li> 
 
    <li class="hidden">5</li> 
 
    <li class="hidden">6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
</ul>

voglio elencare la visualizzazione sul browser dovrebbe avere colore alternativo a prescindere dal numero di bambini nascosti.

Answer 1

Sarà necessario rimuovere gli elementi nascosti dal DOM, invece di nasconderli.

Answer 2

Se potessi cambiare la struttura del documento, allora si potrebbe impostare un tag diverso per gli oggetti nascosti, in modo che si potrebbe prendere avanzata del :nth-of-type pseudo-classe:

CSS:

div.list p { 
    height: 2em; 
    border: 1px solid black; 
    margin: 0; 
    } 
    div.list p:nth-of-type(odd) { 
    background: khaki; 
    } 
    div.list p:nth-of-type(even) { 
    background: indianred; 
    } 
    .hidden { 
    display: none; 
    } 

HTML:

<div class="list"> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <span class="hidden">4</span> 
    <span class="hidden">5</span> 
    <span class="hidden">6</span> 
    <p>7</p> 
    <p>8</p> 
    <p>9</p> 
    <p>10</p> 
    <p>11</p> 
</div> 

Answer 3

Come 01.235.853,099 milanon esiste attualmente un modo per farlo semplicemente con i CSS. È possibile aggirare il problema alterando il codice che nasconde gli elementi li in modo da inserire un altro elemento fittizio nascosto dopo l'elemento nascosto per uniformare le cose e farlo sembrare corretto, quindi rimuovere quell'elemento fittizio quando lo si nasconde.

var hide = function (el) { 
    el.classList.add('hidden'); 
    el.insertAdjacentHTML('afterend', '<li class="hidden dummy"></li>'); 
    }, 
    show = function (el) { 
    if (el.classList.contains('hidden')) { 
     el.classList.remove('hidden'); 
     el.parentNode.removeChild(el.nextElementSibling); 
    } 
    }; 

Working fiddle here