<ul class="palette">
	  <li>
		    <div class="color-options">
		      	<a class="add" href="#">Add</a>
			      <a class="delete" href="#">Delete</a>
		    </div>
	  </li>
</ul>
/**
 * Styling by sibling count: Color palette example
 */
 
/* Hide "color" 4 items or more */
.palette li:first-child:nth-last-child(n+4) .color-options a:after,
.palette li:first-child:nth-last-child(n+4) ~ li .color-options a:after {
	content: none;
}

/* Hide word when 6 items or more */
.palette li:first-child:nth-last-child(n+6) .color-options a,
.palette li:first-child:nth-last-child(n+6) ~ li .color-options a {
	color: transparent;
	font-size: 0;
}

.palette li:only-child .delete {
	display:none;
}

/* From this point it’s just styling */
.palette {
	display: flex;
	height: 100vh;
  margin: 0;
  padding: 0;
	font: bold 90%/1 sans-serif;
  li {
		flex: 1;
		list-style: none;
		background: #D6E055;
	}
}
.color-options {
  background: rgba(0,0,0,.5);
	padding: 10px;
	margin: 0 10px;
	overflow:hidden;
	border-radius:0 0 10px 10px;
  .add { 
    float:left; 
    &:before {
			content:'✚';
			color:#590;
		}
  }
  .delete { 
    float:right; 
    &:before {
			content:'✖';
			color:#b00;
		}
  }
  a {
	  color: white;
		text-decoration:none;
    &:before {
		  display:inline-block;
			font-size: 1rem;
			width:1.3rem;
			margin-right:.3rem;
			text-align: center;
			line-height: 1.3;
			background:white;
			border-radius: 50%;
			letter-spacing: normal;
		}
    &:after {
		  content: ' color';
			font-weight: normal;
		}
	}
}
function $$(expr, con) { return [].slice.call((con || document).querySelectorAll(expr)); }

var colors = [
	'#D6E055', // Agave
	'#082323', '#E6E2AF', '#A7A37E', '#EFECCA', '#046380', // Sandy stone beach
   	'#1C171D', '#FEE169', '#CDD452', '#F9722E', '#C9313D', // Sushi Maki
   	'#2E95A3', '#50B8B4', '#C6FFFA', '#E2FFA8'  // Agave
   ],
   palette = document.querySelector('.palette'),
   template = palette.firstElementChild;
   
function addColor(template) {
	var li = template.cloneNode(true);
	var color = colors.pop();
	colors.unshift(color);
	li.style.background = color;
	palette.insertBefore(li, template.nextSibling);
}

palette.onclick = function(evt) {
	var button = evt.target;
	
	if (button.className == 'add') {
		addColor(button.parentNode.parentNode);
	}
	else if (button.className == 'delete') {
		var li = button.parentNode.parentNode;
		li.parentNode.removeChild(li);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.