<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]);
   }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.