<style>
div > div::before { content: counter(item) '. '; }

.Res4 { counter-reset: item 4; }
.Inc1 { counter-increment: item; }
.Set8 { counter-set: item 8; }

.Fade { opacity: 20%; }
</style>
<script>
window.addEventListener('load', () => {
    document.getElementById('button').addEventListener('click', (e) => {
        document.getElementById('zero' ).classList.toggle('Res4');
        document.getElementById('five' ).classList.toggle('Inc1');
        document.getElementById('six'  ).classList.toggle('Inc1');
        document.getElementById('eight').classList.toggle('Set8');
        document.getElementById('nine' ).classList.toggle('Inc1');

        document.querySelectorAll('span').forEach( e => {
            e.classList.toggle('Fade');
        });
    });
});
</script>

<div id='zero' class='Res4'>
    <div id='five'  class='Inc1'><span>Five </span> <span class='Fade'>Zero</span></div>
    <div id='six'   class='Inc1'><span>Six  </span> <span class='Fade'>Zero</span></div>
    <div id='eight' class='Set8'><span>Eight</span> <span class='Fade'>Zero</span></div>
    <div id='nine'              ><span>Eight</span> <span class='Fade'>One </span></div>
</div>

<br/>

<button id='button'>click this</button>