<div id="red" class="red color">
	I'm red
</div>

<div class="blue color">
	I'm not red. I want to be blue
</div>

<div id="green" class="green color">
	I'm not red either. I want to be green.
</div>
/*Specificity: 0,0,0,1*/
div {
	border: 1px solid blue;
	margin: 2em;
}

/*Specificity: 0,0,1,0*/
.red {
	border-color: red;
}

/*Specificity: 0,0,2,0*/
.red.color {
	border-color: red;
}

/*Specificity: 0,1,0,0*/
#red {
	border-color: red;
}

/*Specificity: 0,1,1,0*/
.color#green {
	border-color: green;
}

/*Specificity: 0,1,1,0*/
/*don't focus on the fact that there isn't a #pink in the HTML. 
Focus on the fact that this overrides the other styles.
*/
.color:not(#pink) {
	border-color:orange;
}

/*Specificity: 0,1,1,0*/
.color#red {
	border-color: red;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.