CSS style: differentiate nested <mark> elements with a gamut of colors

nested-colors.css

/* differentiate nested <mark> elements with a gamut of colors */
mark {
	color: #000;
	transition: background-color 0.2s ease-in;
}

mark,
mark:hover,
mark:hover mark {
	background: hsl(0, 100%, 90%);
}

mark > mark,
mark > mark:hover,
mark > mark:hover mark {
	background: hsl(60, 100%, 85%);
}

mark > mark > mark,
mark > mark > mark:hover,
mark > mark > mark:hover mark {
	background: hsl(120, 100%, 80%);
}

mark > mark > mark > mark,
mark > mark > mark > mark:hover,
mark > mark > mark > mark:hover mark {
	background: hsl(180, 100%, 75%);
}

mark > mark > mark > mark > mark,
mark > mark > mark > mark > mark:hover,
mark > mark > mark > mark > mark:hover mark {
	background: hsl(240, 100%, 70%);
}

mark > mark > mark > mark > mark > mark,
mark > mark > mark > mark > mark > mark:hover,
mark > mark > mark > mark > mark > mark:hover mark {
	background: hsl(300, 100%, 65%);
}