display: removed ?

by simurai

HTML

<ul>
    <li>Item 1</li>
    <li class="removed">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li class="removed">Item 7</li>
</ul>

CSS

.removed {
    display: none;
    /* display: removed; insted? */
}

/* ----------------------------- */

li:nth-child(even) { background: hsl(0,0%,94%); }
li:nth-child(odd) { background: hsl(0,0%,84%); }
li:first-child { border-radius: 10px 10px 0 0; }
li:last-child { border-radius: 0 0 10px 10px; }

/* ----------------------------- */

body { font-family: sans-serif; padding: 50px; }
li { padding: 10px; }

JavaScript

/*

Would be great if once an element has display: none, it wouldn’t affect first/last-child and other pseudo selectors. Or CSS would need something like "display: removed" that behaves like when the element is removed from the DOM, aka make pseudo selectors ignore them.

See how the "removed" (display:none) li's mess up the design. -> No rounded corners at the bottom, broken stripes.

*/