<div class="my-element">
	<button>Button</button>
</div>

<div class="my-element">
	<button>Button</button>
</div>
* {
	box-sizing: border-box;
}

body {
	--primaryColor: #d452f2;
	background-color: var(--primaryColor);
	display: flex;
}

button {
	padding: 20px;
	border: none;
	font-size: 1.1rem;
	background-color: var(--primaryColor);
}

.my-element {
	--primaryColor: blue;
	padding: 40px;
	margin: 20px;
	border: 1px solid black;
}

.my-element:nth-child(2n) {
  --primaryColor: #82f263;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.