<section>
<button data-js="add" type="button">Add</button>
<button data-js="delete" type="button">Delete</button>
<small>Click "add" to add more list items or "delete" to delete one.</small>
<ul id="myList"></ul>
</section>
li {
color: blue;
list-style: inside;
}
/* Exactly 2 items */
li:nth-last-child(2):first-child,
li:nth-last-child(2):first-child ~ li {
color: red;
}
/* >= 3 list items */
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
color: green;
}
/* >= 5 list items */
li:nth-last-child(n+5),
li:nth-last-child(n+5) ~ li {
background-color: green;
color: white
}
small {
display: block;
margin-top: 10px;
}
section {
margin: 30px auto;
max-width: 500px;
border: 1px dashed grey;
padding: 15px;
}
var addButton = document.querySelector('[data-js="add"]');
addButton.addEventListener('click', function() {
var list = document.getElementById('myList');
var newEntry = document.createElement('li');
var text = document.createTextNode('entry');
newEntry.appendChild(text);
list.appendChild(newEntry);
});
var deleteButton = document.querySelector('[data-js="delete"]');
deleteButton.addEventListener('click', function() {
var list = document.getElementById('myList');
if (list.childNodes.length) {
list.removeChild(list.childNodes[0]);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.